Get everything for $99, lifetime

Components

Direction-Aware Flip Card

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/direction-aware-flip-card

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { DirectionAwareFlipCard } from "@/components/ui/DirectionAwareFlipCard";

<DirectionAwareFlipCard
  frontSrc="/cards/front.webp"
  backSrc="/cards/back.webp"
  width={360}
  height={520}
  radius={24}
/>

Use cases

  • Trading-card / collectibles UI

    Reveal alternate art or stats on the back of a card without leaving the page.

  • Pricing tier compare

    Flip from headline pricing to detailed feature breakdown.

  • Profile / member card

    Front: portrait + name. Back: bio + links.

  • Event ticket / boarding pass

    Cover art on the front, QR code and itinerary on the back of a digital pass.