Gallery Curved Strip

ProNew

A strip of cards fanned along a gentle curve: the chosen card sits level in the middle and the rest sag and tilt away.

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/gallery-curved-strip

Prop	Type	Default	Description
`items`	`{ id: string; title: string; caption?: string; art?: string }[]`	`-`	Cards in the strip.
`label`	`string`	`"Gallery"`	Accessible name.
`index`	`number`	`-`	Controlled index.
`defaultIndex`	`number`	`0`	Initial index.
`onIndexChange`	`(index: number) => void`	`-`	Called when the chosen card changes.
`spacing`	`number`	`128`	Distance between neighbouring cards in px.
`sag`	`number`	`14`	Outer cards sag this many px per step squared.
`turn`	`number`	`7`	Tilt of each step in degrees.

Moving along the strip is one 550ms transform and opacity transition per card; nothing moves by itself.
With prefers-reduced-motion: reduce cards jump to their place with no transition.
A labelled carousel group; the chosen card has aria-current and the others have tabindex="-1" (roving focus).
Cards far from the middle are hidden.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/gallery-curved-strip

Prop	Type	Default	Description
`items`	`{ id: string; title: string; caption?: string; art?: string }[]`	`-`	Cards in the strip.
`label`	`string`	`"Gallery"`	Accessible name.
`index`	`number`	`-`	Controlled index.
`defaultIndex`	`number`	`0`	Initial index.
`onIndexChange`	`(index: number) => void`	`-`	Called when the chosen card changes.
`spacing`	`number`	`128`	Distance between neighbouring cards in px.
`sag`	`number`	`14`	Outer cards sag this many px per step squared.
`turn`	`number`	`7`	Tilt of each step in degrees.

Moving along the strip is one 550ms transform and opacity transition per card; nothing moves by itself.
With prefers-reduced-motion: reduce cards jump to their place with no transition.
A labelled carousel group; the chosen card has aria-current and the others have tabindex="-1" (roving focus).
Cards far from the middle are hidden.