Flip cardPro

• Reveal details on demand: plan features, flashcards, contact cards.

• Content that must be compared side by side: show both faces.
• Faces containing form fields or buttons: use a dialog.

Import it from @/components/ui/flip-card after installing.

import { FlipCard } from "@/components/ui/flip-card";

export function PlanCard() {
  return (
    <FlipCard
      label="Pro plan"
      className="h-72 w-60"
      front={<div className="p-5">Pro · $12/mo</div>}
      back={<ul className="p-5">…features</ul>}
    />
  );
}

• Click mode is a toggle button with aria-pressed.
• The hidden face is aria-hidden, so only the visible side is read.
• Under reduced motion the faces cross-fade instead of rotating.

• A spring rotation (stiffness 140, damping 18) with backface hiding.

• Give it explicit dimensions; faces fill the card.

• One transformed element; both faces stay mounted.

• Always set a height: faces are absolutely positioned.
• Use trigger="hover" only for decorative reveals.