Swipe deck
Cards decided one by one — drag right to like, left to pass, or the buttons (← → on the web) — with PersonCard: a person's photos, name, age, seal, distance, bio and interests.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- Discover in a dating app: like or pass, one profile at a time.
- Any one-by-one decision: approve or reject, keep or skip.
When not to use
- To browse many items side by side.Use instead: List
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SwipeDeck, PersonCard } from "@krizaka/ui/swipe-deck";Examples
Discover
Two profiles, photos to page through, the deck decided by drag, buttons or keys.
Elena 29
3.2 km awaySunsets, vinyl and long walks.
Props
PersonCard
A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | — | The name. |
photosrequired | readonly { src: string; alt?: string | undefined; }[] | — | The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. |
age | number | — | The age, written after the name. |
badge | ReactNode | — | Beside the name: a VerifiedBadge. |
bio | string | — | A sentence about the person. |
className | string | — | Classes merged on the card. |
footer | ReactNode | — | At the bottom: the interests as chips. |
meta | ReactNode | — | A line under the name: a distance, a job. |
photoLabels | { previous: string; next: string; } | { previous: "Previous photo", next: "Next photo" } | The photo buttons' words: { previous: "Previous photo", next: "Next photo" } — passed translated. |
SwipeDeck
A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced.
| Prop | Type | Default | Description |
|---|---|---|---|
getIdrequired | (item: T) => string | — | A card's id. |
getNamerequired | (item: T) => string | — | A card's name, for the announcements. |
itemsrequired | readonly T[] | — | The cards still to decide, the first on top. |
labelsrequired | SwipeDeckLabels | — | The words, passed translated. |
onSwiperequired | (item: T, direction: SwipeDirection) => void | — | Called with the card decided and the decision; remove it from items. |
renderCardrequired | (item: T) => ReactNode | — | A card (usually a PersonCard). |
className | string | — | Classes merged on the root. |
empty | ReactNode | — | Shown when there is no card left (an EmptyState). |
Accessibility
- The top card is the only one exposed; the next waits hidden from assistive technology.
- React Native offers Like and Pass as accessibility actions of the card.
- Under reduced motion the card leaves without flying.
Keyboard
| Keys | Action |
|---|---|
| Arrow Right / Arrow Left | On the focused deck: like or pass the top card. |
| Tab | Reaches the card's photo buttons and the like and pass buttons. |
Best practices
- Remove the decided card from
itemsinonSwipe; keep two or three loaded ahead. - Always keep the buttons: a swipe is never the only way.
- Say the decision (
decided) so a screen reader hears it.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub