Planes

Components

Media

A swipeable card deck. The front card drags off in your swipe direction, then tucks behind a fanned stack. Built for touch, with a reduced-motion fallback.

All components
Cherry blossoms in full bloom
Neon streets of Shibuya, Tokyo
Torii gates at Fushimi Inari, Kyoto
Mount Fuji
A steaming bowl of ramen
Dotonbori at night, Osaka
Hakone Lake in full bloom
Hakone Lake in full bloom
Swipe

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/swipe-card-deck

Unlock with Planes Pro

$99 once · 54 Pro components · lifetime updates.

<SwipeCardDeck
  items={[
    { src: "/images/artwork-1.jpg", alt: "Working Knowledge" },
    { src: "/images/artwork-2.jpg", alt: "Practical Demonstration" },
    { src: "/images/artwork-3.jpg", alt: "Field Notes" },
  ]}
  hint="Swipe"
/>

Use cases

  • Mobile-first browsing

    Tinder-style swiping through cards, profiles, or products on touch devices.

  • Onboarding decks

    Step users through a stack of intro cards one swipe at a time.

  • Content shuffles

    Cycle featured items where dismissed cards loop to the back of the deck.

  • Responsive fallback

    Drop-in mobile presentation for fanned or grid layouts that don't fit small screens.