KQ-572 · SNAP/CAROUSEL

Snap Carousel

A carousel on native scroll-snap, so the gesture is the browser's own and the component only decides where it lands. The dot for the settled slide stretches into a pill on snap — a layout animation, so one shape travels and widens rather than a second dot blinking on elsewhere — while the next slide peeks past the edge. Autoplay is a chain of timeouts keyed to the settled index, standing down on hover, on focus inside the carousel and whenever the tab is hidden; the scroller is focusable, Left and Right move a slide, Home and End jump, and the dots carry a roving tabindex.

KQ-572 · SNAP/CAROUSEL

Twin sweep

Cold pass, then working temperature. The drift between them is the record.

Paired clamps

Torque goes on in pairs so the plate never loads on one side alone.

Travelling sheet

Every rail carries its own figures from the bench to the depot door.

Depot handover

The run leaves as one crate and is signed for on its numbers.

Slide 1 / 4

Install

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

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

Props

slides: { id: string; content: React.ReactNode }[]; default —; Slides, left to right.
autoplay: number; default —; Milliseconds between advances; omit to disable autoplay.
loop: boolean; default true; Wrap past the ends.
label: string; default Carousel; Names the carousel.
onIndexChange: (index: number) => void; default —; Fires when the settled slide changes.

Prop	Type	Default	Description
slides	{ id: string; content: React.ReactNode }[]	—	Slides, left to right.
autoplay	number	—	Milliseconds between advances; omit to disable autoplay.
loop	boolean	true	Wrap past the ends.
label	string	Carousel	Names the carousel.
onIndexChange	(index: number) => void	—	Fires when the settled slide changes.