Card Stack

Component 26

About

A draggable deck of cards reviewed one at a time, with swipe/throw gestures, buttons, keyboard shortcuts and undo — for quick triage like shortlisting destinations or candidates.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card Stack to your project and fits it to your theme.

Code

How Card Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import CardStack from "@/components/ui/card-stack";

type Destination = { id: string; name: string; country: string; blurb: string };

const destinations: Destination[] = [
  {
    id: "lisbon",
    name: "Lisbon",
    country: "Portugal",
    blurb: "Pastel facades, hills, and the smell of grilled sardines.",
  },
  {
    id: "kyoto",
    name: "Kyoto",
    country: "Japan",
    blurb: "Temples, bamboo groves, and quiet backstreets.",
  },
  {
    id: "oaxaca",
    name: "Oaxaca",
    country: "Mexico",
    blurb: "Mole, mezcal, and markets that spill into the street.",
  },
  {
    id: "tbilisi",
    name: "Tbilisi",
    country: "Georgia",
    blurb: "Sulfur baths, old balconies, and incredible bread.",
  },
];

export default function CardStackDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <CardStack
        items={destinations}
        getKey={(item) => item.id}
        getLabel={(item) => item.name}
        labels={{ left: "Skip", right: "Shortlist" }}
        outcomes={{ left: "skipped", right: "shortlisted" }}
        label="Destinations"
        renderCard={(item) => (
          <div className="flex h-full flex-col justify-end gap-1 p-6">
            <p className="text-sm text-[var(--text-secondary)]">
              {item.country}
            </p>
            <h3 className="text-xl font-medium">{item.name}</h3>
            <p className="text-sm text-[var(--text-secondary)]">{item.blurb}</p>
          </div>
        )}
      />
    </div>
  );
}