KQ-926 · CAROUSEL/CARD

Carousel Card

A deck of cards carried by one message. The track glides to the chosen slide on glide while the dot row's pill travels between dots on snap through a useId-prefixed layoutId, so one pill moves rather than four dots blinking. A finger drags the rail one-to-one and the release snaps to the nearest card; Left and Right step the dots without wrapping, Home and End jump to the first and last, and focusing a card's control brings that card in.

KQ-926 · CAROUSEL/CARD

Coldbrook Supply · 09:14Four things that would suit the depot run.
- Card 1 of 4, Basin Quay lantern, $48.
- Card 2 of 4, Fernworks tarp, $34.
- Card 3 of 4, Waylight head torch, $26.
- Card 4 of 4, Coldbrook flask, $19.

Card 1 of 4 · Basin Quay lantern

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/carousel-card

Props

items: CarouselCardItem[]; default —; The slides in rail order; each is { id, title, note?, price?, meta? } and draws a procedural swatch seeded from its id.
index / defaultIndex: number; default 0; Controlled or initial slide index.
onIndexChange: (index: number) => void; default —; Fires from the setter that moved the rail: an arrow, a dot, a key, or a settled drag.
onCardAction: (item: CarouselCardItem) => void; default —; Fires from a slide's control with that slide's item.
actionLabel: string; default "View"; The word on each slide's control.
format: (value: number) => string; default Intl.NumberFormat("en-US"); Money formatter for an item's price; the locale is pinned so the server's string matches the client's.
peek: number; default 28; Pixels of the next card left showing, subtracted from the measured viewport width.
label: string; default —; Names the carousel for assistive technology.
className: string; default —; Extra classes on the bubble.

Prop	Type	Default	Description
items	CarouselCardItem[]	—	The slides in rail order; each is { id, title, note?, price?, meta? } and draws a procedural swatch seeded from its id.
index / defaultIndex	number	0	Controlled or initial slide index.
onIndexChange	(index: number) => void	—	Fires from the setter that moved the rail: an arrow, a dot, a key, or a settled drag.
onCardAction	(item: CarouselCardItem) => void	—	Fires from a slide's control with that slide's item.
actionLabel	string	"View"	The word on each slide's control.
format	(value: number) => string	Intl.NumberFormat("en-US")	Money formatter for an item's price; the locale is pinned so the server's string matches the client's.
peek	number	28	Pixels of the next card left showing, subtracted from the measured viewport width.
label	string	—	Names the carousel for assistive technology.
className	string	—	Extra classes on the bubble.