Flip Card

A card that turns over to show its back, rolling the way the pointer moves: in from the left, it turns right; out the top, it turns up.

pnpm dlx shadcn@latest add @latheui/flip-card

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Flip Card is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes. Size it with className; both faces fill it.

Prop	Type	Default	Description
front* (required)	ReactNode	—	The face shown first.
back* (required)	ReactNode	—	The face shown when turned.
label* (required)	string	—	Accessible name for the card.
flipped	boolean	—	Controlled: whether the back is showing.
defaultFlipped	boolean	false	Start turned over.
onFlippedChange	(flipped: boolean) => void	—	Called when the card turns.
trigger	"hover" \| "press"	"hover"	Hover turns it as a mouse comes in and back as it leaves. Clicks, taps and keys always turn it.
axis	"auto" \| "x" \| "y"	"auto"	Auto follows the side the pointer crosses. X turns top over bottom, Y side over side.
perspective	number	1100	Camera distance in px. Lower is more dramatic.
curve	Curve	soft spring	How it turns. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.
faceClassName	string	—	Classes for both faces, such as a background.

The card is a toggle button: its pressed state says whether the back is showing.
The hidden face is inert and hidden from assistive tech, so only the visible side is read and reachable.
Hover turning only happens with a mouse. Touch and pen turn it with a tap.
Because the card is a button, keep its faces free of links and other controls.

A half turn about the axis the pointer crossed, with a soft spring (stiffness 170, damping 22) or your curve.
Leaving by a different side than it came in turns it on that side's axis, and the back never ends up upside down.
With reduced motion the card switches faces at once.

<FlipCard trigger="press" axis="x" label="Note" front={front} back={back} />

<FlipCard curve={{ type: "spring", stiffness: 220, damping: 12 }} label="Card" front={front} back={back} />

API reference

Also accepts native div attributes. Size it with className; both faces fill it.

Prop	Type	Default	Description
front* (required)	ReactNode	—	The face shown first.
back* (required)	ReactNode	—	The face shown when turned.
label* (required)	string	—	Accessible name for the card.
flipped	boolean	—	Controlled: whether the back is showing.
defaultFlipped	boolean	false	Start turned over.
onFlippedChange	(flipped: boolean) => void	—	Called when the card turns.
trigger	"hover" \| "press"	"hover"	Hover turns it as a mouse comes in and back as it leaves. Clicks, taps and keys always turn it.
axis	"auto" \| "x" \| "y"	"auto"	Auto follows the side the pointer crosses. X turns top over bottom, Y side over side.
perspective	number	1100	Camera distance in px. Lower is more dramatic.
curve	Curve	soft spring	How it turns. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.
faceClassName	string	—	Classes for both faces, such as a background.

Accessibility

The card is a toggle button: its pressed state says whether the back is showing.
The hidden face is inert and hidden from assistive tech, so only the visible side is read and reachable.
Hover turning only happens with a mouse. Touch and pen turn it with a tap.
Because the card is a button, keep its faces free of links and other controls.