Swipe Deck
NewPro
A deck of cards you drag left or right to dismiss, with rotation, a distance threshold, flicks, spring return, arrow keys and undo.
Customize
110px
550
14°
#ff784f
Buttons
When to use it
- Reviewing a pile of items one at a time, such as bug reports or photos
- A quick wishlist or preference quiz at the start of an app
- Flash cards where each side of the swipe means known or not yet
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 418
Installation
Swipe Deck is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy swipe-deck.tsx into components/ui and run npm install motion.
Usage
import { SwipeDeck } from "@/components/ui/swipe-deck";
<SwipeDeck
className="w-80"
rightLabel="Wishlist"
cards={games.map((game) => <GameCard key={game.id} game={game} />)}
onSwipe={(index, direction) => save(games[index], direction)}
/>Props
18 properties| Property | Type | Default | Description |
|---|---|---|---|
| cards | ReactNode[] | — | The cards, from the top of the deck down. |
| threshold | number | 110 | Drag distance that sends a card away on release, in pixels. |
| velocity | number | 550 | Release speed that sends a card away even before the threshold, in pixels per second. |
| maxRotation | number | 14 | Rotation of a card once it is well past the threshold, in degrees. |
| visible | number | 3 | Cards drawn at once, including the top one. |
| leftLabel | string | "Skip" | Label stamped on a card dragged left. |
| rightLabel | string | "Save" | Label stamped on a card dragged right. |
| leftColor | string | "#b9b0a4" | Color of the left stamp and tint. |
| rightColor | string | "#ff784f" | Color of the right stamp and tint. |
| showButtons | boolean | true | Show the left, undo and right buttons under the deck. |
| hint | boolean | true | Nudge the top card once after mounting, to show that it moves. |
| empty | ReactNode | — | Shown when no cards are left. |
| onSwipe | (index: number, direction: "left" | "right") => void | — | Called with the index of the card that left, and the side it went to. |
| onUndo | (index: number) => void | — | Called with the index of the card that came back. |
| onEmpty | () => void | — | Called when the last card has left. |
| label | string | "Card deck" | Accessible name of the deck. Arrow keys swipe and Backspace undoes while it has focus. |
| ref | Ref<SwipeDeckHandle> | — | swipe(direction) and undo() steer the deck from code. |
| className | string | — | Extra classes for the deck, such as its width. |
Dependencies: motion