Swipe deckPro
Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.
Cliffside cabin
Big Sur, CA
$240 night
Drag, use the buttons, or focus the deck and press ← / →
When to use
- Fast yes / no decisions over a queue: candidates, stays, products, flashcards.
When not to use
- Choices people need to compare: use a grid.
- Irreversible actions without undo.
Installation
Usage
Import it from @/components/ui/swipe-deck after installing.
example.tsx
import { SwipeDeck } from "@/components/ui/swipe-deck";
export function Stays({ homes }: { homes: Home[] }) {
return (
<SwipeDeck
aria-label="Stays"
items={homes}
getId={(h) => h.id}
onSwipe={(home, dir) => dir === "right" && save(home)}
renderCard={(home) => <HomeCard home={home} />}
/>
);
}API reference
SwipeDeck
A stack of cards with drag, buttons, arrow keys and undo. Generic over the item type.
| Prop | Type | Default | Description |
|---|---|---|---|
| items / getId / renderCard | T[] / (item) => string / (item) => ReactNode | – | Data, a stable id and the card content. |
| onSwipe | (item, "left" | "right") => void | – | Called after a card leaves. |
| empty | ReactNode | – | Shown when the deck is empty. |
| leftLabel / rightLabel | string | "Pass" / "Like" | Button names and the stamps on the card. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Pass or like the top card |
| Backspaceor⌘Z | Undo |
| Tab | Reach the buttons |
Accessibility
- Every swipe has a button and a key, so dragging is never required.
- Results and remaining count are announced politely.
- Cards behind the top one are aria-hidden.
Motion
- The top card rotates with the drag and shows the like / pass stamp as you cross the threshold.
- Released past 110px or with enough velocity, it flies off; otherwise it springs back.
- Cards underneath scale up into place.
Responsive behavior
- Up to 288px wide with a 3:4 card; fits at 320px.
Performance
- Only three cards render at a time.
Notes for AI
- onSwipe fires immediately; undo does not call it again, so handle reversals yourself if you persist swipes.
This page as Markdown, for assistants and coding agents:
/components/swipe-deck/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt