ns-ui
A card-stack navigator that shows its actual card edges as a scrubbable stripe of thin lines — dragging it riffles cards past with quick flip-past kicks, and the same stripe doubles as the pagination readout.
Use when a deck stepped through one card at a time where the pagination readout and the scrub control should be the same element, the visible edge stripe both showing position in the deck and riffling it under drag; pick gallery-coverflow-caustic instead when several items should be visible at once as a browsable gallery, or queue-triage-ratchet when each card is a decision that removes it from the stack rather than a page to move past.
Install
npx shadcn add https://design.helpmarq.com /r/carousel-card-riffle.jsonOnboarding
Step 1 · Setup
Pick a name your team will recognize — you can rename it later from settings.
Drag the edge on the right, scroll over it, or focus it and use arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | RiffleEdgeItem[] | — | — |
| index? | number | — | controlled current index; omit for uncontrolled |
| defaultIndex? | number | — | — |
| onIndexChange? | (index: number) => void | — | — |
| className? | string | — | — |
| aria-label? | string | — | accessible name for the enclosing group |