Special/SwipeCards

SwipeCards

Tinder-style draggable card stack. Drag horizontally past the threshold to swipe — LIKE/NOPE labels appear as you drag. Cards below scale and offset to create natural depth. Release before the threshold to spring back.

import { SwipeCards } from "@animui/ui"

Demo

🚀LaunchSwipe past 100px

🌿GrowRelease to snap back

🎨CreateLIKE / NOPE on drag

Swipe log

drag a card…

Swipe behavior

Below threshold: Card springs back to center with a smooth bounce.
Past threshold: Card flies off screen, onSwipe fires immediately, card is removed 380ms later.
Stack empty: emptyContent is shown; onEmpty fires. Remount via key change to reset.

SwipeCard props

Prop	Type	Default	Description
`id`	`string \| number`	—	Unique identifier used as the React key.
`content`	`ReactNode`	—	Card contents. Use h-full w-full to fill the container.

SwipeCards props

Prop	Type	Default	Description
`cards`	`SwipeCard[]`	—	Array of cards to display. Each needs a unique id.
`onSwipe`	`(card: SwipeCard, direction: "left" \| "right") => void`	—	Fires immediately when swipe threshold is crossed.
`onEmpty`	`() => void`	—	Called after the last card is swiped away.
`emptyContent`	`ReactNode`	`null`	Shown in place of the stack when all cards are swiped.
`threshold`	`number`	`100`	Horizontal pixel offset required to trigger a swipe.
`visibleCount`	`number`	`3`	Number of cards visible in the stacked view.
`className`	`string`	—	Set width and height of the card container here (required).
`cardClassName`	`string`	—	Applied to each individual card element.