FlipCard

3D flip card with hover and click triggers.

Preview

Backface hidden 3D flip effect

This content was hidden behind

bash

npx auralix-ui add flip-card

tsx

import { FlipCard } from "@/components/ui/FlipCard";

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

Name	Type	Default	Description
`front`	`ReactNode`	`-`	Front face content.
`back`	`ReactNode`	`-`	Back face content.
`flipOnHover`	`boolean`	`true`	Flip on mouse hover.
`flipOnClick`	`boolean`	`false`	Flip on click.

On this page