ns-ui

Carousel Card Riffle

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.json
  • stack
  • cards
  • carousel
  • stepper
  • pagination
  • scrub
  • slider
  • onboarding
  • queue

Onboarding

Step 1 · Setup

Name your workspace

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.

Props

PropTypeDefaultDescription
itemsRiffleEdgeItem[]
index?numbercontrolled current index; omit for uncontrolled
defaultIndex?number
onIndexChange?(index: number) => void
className?string
aria-label?stringaccessible name for the enclosing group