Swipe Cards
Tinder-style card stack. Drag the top card left or right past the threshold to swipe it away; the cards behind move up as you drag.
Import
import { SwipeCards } from "@igorao79/uivix";Examples
Default
Drag with mouse or touch
🛸
Glitch
Never met a bug they couldn't scramble.
âš¡
Neon
Ships animations at 60fps.
👾
Pixel
Speaks fluent CSS grid.
🌌
Aurora
Loves gradients and late-night deploys.
Swipes
—
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | SwipeCardItem[] | - | Initial stack { id, content }, top card first. Change key to reset |
| onSwipe | (card, direction) => void | - | Called after a card leaves the stack |
| threshold | number | 110 | Drag distance in px needed to swipe |
| loop | boolean | false | Put swiped cards back at the bottom |
| visible | number | 3 | Cards visible in the stack |
| emptyState | ReactNode | - | Shown when the stack is empty |
| className | string | - | Size and other classes (default h-80 w-64) |