Tinder-Style Swipe Cards

Pro

Tinder-style swipe cards where the top card flicks off under your thumb and the one underneath rises in real time.

carousel

Tinder-Style Swipe Cards component preview

Overview

Tinder-Style Swipe Cards is a React and Tailwind CSS swipe card stack for dating, matching, and review flows, in Next.js or any React app, built on Framer Motion. Drag the top card and it rotates with your pull, LIKE and NOPE stamps fade in with distance, and the card beneath rises before you let go. A flick or a committed drag sends it off, onSwipe reports the id and direction, and loop recycles the deck. Pass, Super like, and Like buttons do the same without dragging, and reduced motion turns dragging off so those buttons carry the flow.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add stacked-swipe-deck

~/your-project

npx wensity@latest add stacked-swipe-deck

~/your-project

yarn dlx wensity@latest add stacked-swipe-deck

~/your-project

bunx 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

import {
  StackedSwipeDeck,
  type SwipeCardItem,
} from "@/components/wensity/stacked-swipe-deck";

const cards: SwipeCardItem[] = [
  { id: "ada", title: "Ada, 27", subtitle: "Designer · SF",
    gradient: "linear-gradient(135deg, #ff8a73, #cd1c18)" },
  { id: "ren", title: "Ren, 31", subtitle: "DJ · Tokyo",
    gradient: "linear-gradient(135deg, #1f2937, #0a0a0b)" },
  { id: "kai", title: "Kai, 24", subtitle: "Photographer · Berlin",
    gradient: "linear-gradient(135deg, #ffa896, #cd1c18)" },
];

export default function Example() {
  return (
    <StackedSwipeDeck
      cards={cards}
      width={320}
      height={440}
      onSwipe={(id, dir) => console.log(id, dir)}
    />
  );
}

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.

Split-Flap Display
A ceramic and graphite split-flap device that ripples each flap into your message.
Interactive 3D Globe
A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.
Animated Code Diff Viewer
Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.
Animated Terminal
A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

Featured in React carousel components.

Overview

Installation

Usage

Props

Related components

Split-Flap Display

Interactive 3D Globe

Animated Code Diff Viewer

Animated Terminal