Card Flip
Renders a card component with flip animation, supporting front/back content.
Installation
npx shadcn@latest add https://scrollxui.dev/registry/card-flip.json Usage
import {
CardFlip,
CardFlipFront,
CardFlipBack,
CardFlipHeader,
CardFlipFooter,
CardFlipTitle,
CardFlipDescription,
CardFlipContent,
CardFlipAction,
} from "@/components/ui/card-flip";<CardFlip>
<CardFlipFront>
<CardFlipHeader>
<CardFlipTitle>Front Title</CardFlipTitle>
</CardFlipHeader>
<CardFlipContent>
<p>Front Content</p>
</CardFlipContent>
</CardFlipFront>
<CardFlipBack>
<CardFlipHeader>
<CardFlipTitle>Back Title</CardFlipTitle>
</CardFlipHeader>
<CardFlipContent>
<p>Back Content</p>
</CardFlipContent>
</CardFlipBack>
</CardFlip>API Reference
Card Flip
Renders a card component with flip animation, supporting front/back content.