Shelf Flow

Covers on a shelf: the one in front faces you, the rest turn on their sides and stack, with a soft reflection beneath.

pnpm dlx shadcn@latest add @latheui/shelf-flow

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Shelf Flow is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string; title?: string; caption?: string }[]	—	The covers, in order.
label* (required)	string	—	Accessible name for the shelf.
index	number	—	Controlled index of the cover at the front.
defaultIndex	number	the middle	Cover at the front to begin with.
onIndexChange	(index: number) => void	—	Called as a new cover reaches the front.
onSelect	(item, index) => void	—	Called when the front cover is clicked, or Enter or Space is pressed.
itemWidth	number	200	Width of a cover in px.
aspect	number	1	Width divided by height.
angle	number	62	Degrees the side covers are turned.
opening	number	0.62	Space between the front cover and its neighbours, as a fraction of the cover width.
spacing	number	0.24	Space between stacked side covers, as a fraction of the cover width.
depth	number	180	How far back the side covers sit, in px.
perspective	number	1000	Camera distance in px.
reflection	boolean	true	A faded mirror image under each cover.
showCaption	boolean	true	The front cover's title and caption.
curve	Curve	smooth spring	How the shelf settles. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.

The shelf is one focusable group with the carousel role description. The cover reaching the front is announced with its title and place.
Covers and reflections are decorative to assistive tech; titles and alt text carry the meaning.
With reduced motion covers stay flat, without turning.

Within one step of the front, position, turn and depth all blend, so covers swing round rather than snapping.
Side covers darken a little with distance. The shelf settles on a spring (stiffness 260, damping 32), carrying a flick's speed.

<ShelfFlow label="Photos" items={photos} itemWidth={240} aspect={3 / 2} angle={45} reflection={false} />

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string; title?: string; caption?: string }[]	—	The covers, in order.
label* (required)	string	—	Accessible name for the shelf.
index	number	—	Controlled index of the cover at the front.
defaultIndex	number	the middle	Cover at the front to begin with.
onIndexChange	(index: number) => void	—	Called as a new cover reaches the front.
onSelect	(item, index) => void	—	Called when the front cover is clicked, or Enter or Space is pressed.
itemWidth	number	200	Width of a cover in px.
aspect	number	1	Width divided by height.
angle	number	62	Degrees the side covers are turned.
opening	number	0.62	Space between the front cover and its neighbours, as a fraction of the cover width.
spacing	number	0.24	Space between stacked side covers, as a fraction of the cover width.
depth	number	180	How far back the side covers sit, in px.
perspective	number	1000	Camera distance in px.
reflection	boolean	true	A faded mirror image under each cover.
showCaption	boolean	true	The front cover's title and caption.
curve	Curve	smooth spring	How the shelf settles. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.