127 Components

Swipe Cards

Cards

Tinder-style swipeable card deck with drag physics, rotational tilt proportional to delta X, floating LIKE and NOPE stamp overlays, stack scale-up, and rewind capabilities.

This item is a full-section Block · View in Dedicated Block Showcase
Tinder Swipeable Card DeckDrag Physics

Rotational tilt springs, stamp overlays, stack scale-up, and rewind

Remaining: 4
LIKE
NOPE

Elena Rostova, 26

Product Designer & Ceramicist2 miles away

Obsessed with Swiss typography, pour-over coffee, and hand-built stoneware. Looking for someone to explore hidden architecture spots with.

Design SystemsCeramicsMatchaArchitecture
Marcus Vance, 28
Sound Engineer & Producer
Sora Takahashi, 25
Landscape Architect
Drag card left or right to swipe

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/swipe-cards.json"

Props

TypeScript props supported by <SwipeCards />.

3 props
PropTypeDefaultDescription
profilesProfileCard[]—Array of profile items containing bio, metadata, tags, and visuals.
onSwipe(card: ProfileCard, direction: "like" | "nope" | "superlike") => void—Callback invoked when a card is swiped or action button is pressed.
classNamestring—Optional custom CSS classes for the container wrapper.

Key Features

  • Intuitive horizontal drag gestures with Hooke's Law spring returns and velocity discard threshold.
  • Dynamic rotational tilt and opacity stamps ('LIKE' / 'NOPE') mapped to drag offset.
  • Background cards dynamically scale up and lift forward as top cards are swiped away.
  • Tactile bottom action buttons (Rewind, Nope, Super Like, Like, Boost) with spring tap feedback.
  • Undo / Rewind stack tracking allowing users to bring back recently swiped cards.

Keyboard & Accessibility

  • Fully operable via standalone action buttons for keyboard and assistive tech users.
  • All action triggers include accessible ARIA labels with state feedback.
  • Gracefully operates with reduced motion settings enabled.
Previous
Sunrise Horizon
Next
Tabbed Code Block