Stacked Tinder-Swipe Cards

Pro

A real deck where the top card flicks off under your thumb and the one underneath physically rises in real time.

carousel

Stacked Tinder-Swipe Cards component preview

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add stacked-swipe-deck

Usage

Import StackedSwipeDeck from @/components/wensity/stacked-swipe-deck and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import {
 2  StackedSwipeDeck,
 3  type SwipeCardItem,
 4} from "@/components/wensity/stacked-swipe-deck";
 5
 6const cards: SwipeCardItem[] = [
 7  { id: "ada", title: "Ada, 27", subtitle: "Designer · SF",
 8    gradient: "linear-gradient(135deg, #ff8a73, #cd1c18)" },
 9  { id: "ren", title: "Ren, 31", subtitle: "DJ · Tokyo",
10    gradient: "linear-gradient(135deg, #1f2937, #0a0a0b)" },
11  { id: "kai", title: "Kai, 24", subtitle: "Photographer · Berlin",
12    gradient: "linear-gradient(135deg, #ffa896, #cd1c18)" },
13];
14
15export default function Example() {
16  return (
17    <StackedSwipeDeck
18      cards={cards}
19      width={320}
20      height={440}
21      onSwipe={(id, dir) => console.log(id, dir)}
22    />
23  );
24}

Props

Prop	Type	Default	Description
`cards`	SwipeCardItem[]	-	Cards in the swipe deck.
`visibleCount`	number	3	Visible cards in the stack.
`width`	number	320	Width of each card in pixels.
`height`	number	440	Height of each card in pixels.
`showActions`	boolean	true	Show the action button row (Pass / Super-like / Like).
`betweenActions`	React.ReactNode	-	Optional content rendered between the card stack and action controls.
`loop`	boolean	true	Re-cycle swiped cards back onto the bottom of the deck.
`onSwipe`	(id: string, direction: SwipeDirection) => void	-	Fired after a card is swiped away.