# Swipe deck

> Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.

Component · Pro · https://lodeui.com/components/swipe-deck

## 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

```bash
npx shadcn@latest add @lode/swipe-deck
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| ← / → | Pass or like the top card |
| Backspace or ⌘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.

## Related

- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Like button](https://lodeui.com/components/like-button) — Heart toggle that bursts into particles and rolls its count.
- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.