Back to Components
Cards

Swipe Cards

Tinder-style swipeable card stack with drag gestures and action buttons.

Momentum

Plan the next release

Keep the highest impact stories on top.

Updated yesterday

Impact

Highlight the wins

Capture the moments worth celebrating.

Updated last week

Focus

Explore the new sprint

Swipe to save the items that matter most.

Updated 2 hours ago

PassSave

1 of 3

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/swipe-cards.tsx

Installation

Using shadcn CLI

npx shadcn add swipe-cards --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion