Swipe Cards

A draggable card stack where each swiped card cycles to the back with smooth momentum-based animations.

One Piece

Attack on Titan

Naruto

Demon Slayer

Jujutsu Kaisen

My Hero Academia

Fullmetal Alchemist

Hunter x Hunter

Installation

$ npx shadcn@latest add https://akshitr.com/r/swipe-cards.json

Usage

import SwipeCards from "@/components/swipe-cards";
 
const cards = [
  { id: 1, title: "Santorini, Greece", url: "/images/santorini.jpg" },
  { id: 2, title: "Kyoto in Autumn", url: "/images/kyoto.jpg" },
];
 
export default function SwipeCardsDemo() {
  return <SwipeCards cards={cards} />;
}

Component API

SwipeCards

Prop	Type	Default	Description
cards	`CardData[]`	—	Array of card data to render in the stack.
className?	`string`	—	Additional classes applied to the root element.

CardData

Prop	Type	Default	Description
id	`number`	—	Unique identifier for the card.
url	`string`	—	Image URL rendered as the card background.
title	`string`	—	Label rendered at the bottom of the card.

Use Cases

Mobile First Match & Recommendation Interfaces: Tinder-style swiping patterns for reviewing candidates, products, or job listings.
Micro-Quiz & Flashcard Tools: Interactive revision or survey apps where users swipe cards left or right to submit answers.
Product Discovery & Outfit Builders: Allow shoppers to flip through recommended styles, accessories, or look combinations.
Interactive Testimonial Cards: Let users dismiss and cycle through customer quote snippets with playful gesture control.

Notes

Swipe threshold is 120px or a velocity of 500px/s — whichever is hit first.
On a confirmed swipe the card animates to ±340px in the drag direction before the stack reorders, keeping the visual stack consistent without any flashes.
dragElastic={1} means the card tracks the pointer with zero resistance — it follows your finger exactly.