Binder Open Swing

ProNew

A binder whose cover swings open on its hinge while the pages inside rise into a loose fan.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/binder-open-swing

Prop	Type	Default	Description
`pages`	`{ id: string; title: string; caption?: string; href?: string }[]`	`-`	Pages in the binder.
`title`	`string`	`"Project files"`	Text on the cover and name of the page list.
`defaultOpen`	`boolean`	`false`	Open on first render.
`open`	`boolean`	`-`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`-`	Called when the cover is toggled.

The cover is one 3D rotation and each page one transform and opacity transition; they run only on toggle.
With prefers-reduced-motion: reduce the binder opens and closes instantly.
The cover is a button with aria-expanded and aria-controls; closed pages are hidden and inert.
Leave about 10rem free to the left of the binder for the open cover.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/binder-open-swing

Prop	Type	Default	Description
`pages`	`{ id: string; title: string; caption?: string; href?: string }[]`	`-`	Pages in the binder.
`title`	`string`	`"Project files"`	Text on the cover and name of the page list.
`defaultOpen`	`boolean`	`false`	Open on first render.
`open`	`boolean`	`-`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`-`	Called when the cover is toggled.

The cover is one 3D rotation and each page one transform and opacity transition; they run only on toggle.
With prefers-reduced-motion: reduce the binder opens and closes instantly.
The cover is a button with aria-expanded and aria-controls; closed pages are hidden and inert.
Leave about 10rem free to the left of the binder for the open cover.