FlipCard

A card that turns over in 3D to reveal its back.

Front

Use the button to turn the card.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/flip-card.json

React
import FlipCard from "@/components/fx/flip-card"

<FlipCard front={<Front />} back={<Back />} />

Flipping is an explicit button, never hover-only, so it works with keyboard, touch and screen readers.
The hidden face is inert and aria-hidden: Tab and screen readers only reach the side you can see.
The button label says what it will do ("Show back"), so it is not also marked aria-pressed.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) cross-fades instead of turning.

Prop	Type	Default	Description
front	ReactNode	—	Front face.
back	ReactNode	—	Back face.
flipLabel	{ toBack, toFront }	'Show back' / 'Show front'	Flip button labels.
flipped	boolean	—	Controlled state.
defaultFlipped	boolean	false	Initial state.
onFlippedChange	(flipped: boolean) => void	—	Called on flip.