# Swipe Deck

Swipeable card stack where the top card hangs from the point you grab and stamps fade in as you drag. Flick it away on your own momentum, tap to page through photos, and undo flies it back in.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/swipe-deck
```

## Import

```tsx
import { SwipeDeck, SwipeDeckPhotos } from "@/components/ui/swipe-deck/swipe-deck";
```

## Variants

- `dating` — Dating: `npx @lumioui/cli add pro/swipe-deck-dating`
- `jobs` — Jobs: `npx @lumioui/cli add pro/swipe-deck-jobs`
- `recipes` — Recipes: `npx @lumioui/cli add pro/swipe-deck-recipes`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `photos` | `(string | ImageSourcePropType)[]` | Image URIs or sources, first shown first. |
| `defaultPage?` | `number` | Initial photo. Default 0. |
| `onPageChange?` | `(page: number) => void` | — |
| `children?` | `React.ReactNode | ((page: number) => React.ReactNode)` | Drawn over the photo (name, details). A function gets the current page,  so each photo can carry its own caption. |
| `className?` | `string` | — |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/swipe-deck