# Card Stack Swipe — React Card Component

> A deck you fling left or right; the top card follows your drag with rotation, flies off with momentum and rejoins the back.

- Category: [Cards](https://pixelpapa.com/components/cards.md)
- Tags: card, swipe, drag, deck, stack
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/cards/card-stack-swipe

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/card-stack-swipe
```

The file is written to `components/pixelpapa/card-stack-swipe.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/cards/card-stack-swipe.

## AI prompt

```text
Add the "Card Stack Swipe" component from PixelPapa UI to this project.

What it is: A deck you fling left or right; the top card follows your drag with rotation, flies off with momentum and rejoins the back.
Category: Cards. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/card-stack-swipe
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/card-stack-swipe.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/card-stack-swipe.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/card-stack-swipe" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More cards

- [Card 3D Tilt](https://pixelpapa.com/components/cards/card-3d-tilt.md) (Pro): A card that leans toward the pointer on springs, with a glare that tracks the cursor and layers floating at different depths.
- [Card Border Beam](https://pixelpapa.com/components/cards/card-border-beam.md) (Pro): A card with a comet of light travelling around its border, drawn with an animated conic gradient and a soft glow copy.
- [Card Expandable Detail](https://pixelpapa.com/components/cards/card-expandable-detail.md) (Pro): Compact rows that expand in place with a shared layout animation, pushing their neighbours aside on a spring.
- [Card Flip](https://pixelpapa.com/components/cards/card-flip.md) (Pro): A two-sided card that turns over on a spring when clicked or activated from the keyboard, on either axis.
- [Card Glass Frost](https://pixelpapa.com/components/cards/card-glass-frost.md): A frosted glass card with a lit top edge and fine grain, floating over slowly drifting colour blobs.
- [Card Hover Reveal Actions](https://pixelpapa.com/components/cards/card-hover-reveal-actions.md) (Pro): A media card whose artwork zooms on hover while quick actions spring in from the edge and a call to action rises from the footer.