Flip Card
Free
A two-sided card that turns over in 3D on hover or click to show its back.
Customize
Trigger
0.7s
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/flip-card.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/flip-card.tsx.
Usage
import { FlipCard } from "@/components/ui/flip-card";
<FlipCard
trigger="click"
front={<div className="h-52 p-6">€25 gift card</div>}
back={<div className="h-52 p-6">Code: K7Q4-2LZP</div>}
/>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | — | Content of the front face. |
| back | ReactNode | — | Content of the back face. |
| trigger | "hover" | "click" | "hover" | Flip while hovered, or toggle on click, Enter and Space. |
| duration | number | 0.7 | Length of the flip, in seconds. |
| className | string | — | Extra classes for the card, such as its width. |
Dependencies: motion