# Motion Card Flip

Pricing plan card with the price up front and the full feature list on the back.

- id: `motion-card-flip`
- Page: https://agentic-ui-kit.com/components/motion-card-flip
- Live preview: https://agentic-ui-kit.com/live/component/motion-card-flip

## Install

```bash
agentic-ui add motion-card-flip
npx shadcn@4.17.0 add @agentic-ui/motion-card-flip
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** two-sided-card, 3d-flip-variant, fold-variant, crossfade-variant, click-trigger, hover-trigger, keyboard-toggle, pressed-state-button, inert-hidden-face, height-locked-to-taller-face, reversible-mid-turn, controlled-and-uncontrolled, flip-state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** saas, billing, ecommerce, travel
- **Interaction:** click, hover, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Pricing plan card with the price up front and the full feature list on the back, Product or destination card that turns to show specs, opening hours or terms, Team member or flashcard-style card that hides a short answer or bio on the back
- **Avoid when:** Content that must be compared side by side at a glance, which belongs in a comparison table, Faces with very different amounts of content, where the short face leaves a large empty area, Linear or enterprise personalities, where the depth group is not allowed and cards only crossfade, Long forms or anything that needs scrolling inside a face
- **Preserve when adapting:** pressed-state-toggle-button, inert-hidden-face, height-of-taller-face, transform-and-opacity-only, crossfade-without-motion, work-only-in-view
- **Replace when adapting:** face-content, toggle-label-and-icon, variant, trigger, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion