Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA deck of cards: drag the top card away, or use the arrows, and it goes to the back of the pile; only the top card is exposed to assistive technology.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for one-at-a-time decisions or browsing a small deck: onboarding tips, flashcards, suggestions.
Do not use it when people need to compare items, or for a long list.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
CarouselStack | items | CarouselItem[] | required | { id, label, content }. |
CarouselStack | label | string | required | Accessible name of the carousel. |
CarouselStack | depth | number | 2 | Cards peeking out behind the top card. |
CarouselStack | threshold | number | 90 | Drag distance in px that sends the card away. |
CarouselStack | onIndexChange | (index) => void | - | Called when the top card changes. |
CarouselStack | index | number | - | Controlled index of the top card. |
The component ships with a Testing Library test (carousel-stack.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes in tests.