Card Flip

ProNew

A two-faced card that rotates in 3D on click, focus, or hover, as a real toggle button.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/card-flip

Prop	Type	Default	Description
`front`	`ReactNode`	-	The front face.
`back`	`ReactNode`	-	The back face.
`axis`	`"x" or "y"`	`"y"`	Rotation axis.
`flipOnHover`	`boolean`	`false`	Also flip while hovered.
`flipped`	`boolean`	-	Controlled flipped state.
`defaultFlipped`	`boolean`	`false`	Initial state when uncontrolled.
`onFlip`	`(flipped: boolean) => void`	-	Fired when the card flips.