Card Stack
Pro
A stack of cards: drag the top one away, the next comes forward, and the stack loops.
MS
Mira Solano
Concept artist · Lisbon
Open to collaborations on small, polished games. Usually replies within a day.
CharactersColor keys
Drag the top card sideways, or use the arrow keys or the buttons below.
Card 1 of 5
Drag a card or use the arrows
Customize
14px
0.05
110px
Installation
Card Stack is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy card-stack.tsx into components/ui and run npm install motion.
Usage
import { CardStack } from "@/components/ui/card-stack";
<CardStack
cards={profiles.map((p) => <ProfileCard key={p.id} profile={p} />)}
onSwipe={(index, direction) => direction === "right" && save(profiles[index])}
className="w-80"
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| cards | ReactNode[] | — | Card contents, top card first. |
| offset | number | 14 | Vertical step between stacked cards, in pixels. |
| scaleStep | number | 0.05 | How much smaller each card behind gets. |
| swipeThreshold | number | 110 | Drag distance in pixels that sends the top card away. |
| onSwipe | (index: number, direction: "left" | "right") => void | — | Called with the index of the card that left the top, and the side it went to. |
| label | string | "Cards" | Accessible name of the stack. |
| className | string | — | Extra classes for the wrapper, such as its width. |
Dependencies: motion