Stack
Web (React)
A 3D interactive stack of cards that can be dragged and rearranged.
An interactive deck of cards utilizing Framer Motion's useTransform and drag. Cards can be thrown to the back of the stack by dragging them off-center, or by clicking them (configurable).
Card 4
Card 3
Card 2
Card 1
Installation
CLI
npx @modus-ui/cli add stackManual
- Copy the code from the component tab.
- Create a file at
components/ui/stack.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | React.ReactNode[] | - | The cards in the stack. |
randomRotation | boolean | false | Gives each card a slight random rotation. |
sensitivity | number | 200 | Drag distance in pixels that sends a card to the back. |
animationConfig | { stiffness: number; damping: number } | { stiffness: 260, damping: 20 } | Spring settings for card movement. |
sendToBackOnClick | boolean | false | Sends the top card to the back on click. |
autoplay | boolean | false | Cycles the cards automatically. |
autoplayDelay | number | 3000 | Milliseconds between automatic cycles. |
pauseOnHover | boolean | false | Pauses autoplay while hovered. |
mobileClickOnly | boolean | false | Uses click instead of drag on mobile. |
mobileBreakpoint | number | 768 | Width in pixels below which the device counts as mobile. |
Comments