# Flip card

> A two-sided card that flips in 3D on click, Enter or hover.

Component · Pro · https://lodeui.com/components/flip-card

## When to use

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

## When not to use

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

## Installation

```bash
npx shadcn@latest add @lode/flip-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
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>}
    />
  );
}
```

## API reference

### FlipCard

Two absolutely positioned faces in a 3D container. Size it with className.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| front / back | `ReactNode` | – | The two faces; keep them non-interactive. |
| label | `string` | – | Names the card; the current face is appended. |
| trigger | `"click" \| "hover"` | `"click"` | Click (and Enter or Space) or hover and focus. |
| axis | `"x" \| "y"` | `"y"` | Flip around the vertical or horizontal axis. |
| flipped / defaultFlipped / onFlippedChange | `boolean` | – | Controlled or uncontrolled state. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Flip (click trigger) |
| Tab | Focus flips it over (hover trigger) |

## Accessibility

- 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.

## Motion

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

## Responsive behavior

- Give it explicit dimensions; faces fill the card.

## Performance

- One transformed element; both faces stay mounted.

## Notes for AI

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

## Related

- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.