Platform uptime
99.98%
Availability across all regions this quarter.
Flip for the breakdown
3D Flip Card
A free flip card component with an accessible 3D reveal.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Flip Card is a free card component for Next.js and React, styled with Tailwind, that flips on its Y axis to reveal a back face. Click, Enter or Space toggle the flip, and on a fine pointer it can also flip on hover, so the reveal works for mouse, keyboard and touch alike.
The card is a real toggle button whose aria-pressed reflects the flipped state, and the face that is currently turned away is set inert and aria-hidden so Tab and assistive tech only ever reach the visible side. Both faces share one fixed box, so the flip is transform only with zero layout shift, and people who prefer reduced motion get an opacity crossfade with no rotation.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/card-flip-3dUsage
import { FlipCard } from "@/components/ui/card-flip-3d";
export default function Page() {
return (
<FlipCard
label="Flip to see the details"
front={
<div className="p-6">
<p className="text-4xl font-semibold">99.98%</p>
<p className="text-muted">Uptime this quarter</p>
</div>
}
back={
<div className="p-6">
<p className="font-medium">Edge 99.99%, API 99.97%</p>
</div>
}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | required | Front face content (informational only, no interactive controls). |
| back | ReactNode | required | Back face content (informational only, no interactive controls). |
| label | string | required | Accessible name for the flip control, for example "Flip to see details". |
| flipOnHover | boolean | true | Also flip on fine-pointer hover. Click and keyboard always work and never depend on hover. |
| className | string | undefined | Additional classes merged onto the card root. |
Customisation
Set the card's Tier 3 perspective property to tune the depth of the 3D flip. A smaller value exaggerates the turn, a larger value flattens it. The default falls back to 1200px, so a fresh shadcn installation does not need Template Empire tokens.
:root {
--card-flip-perspective: 900px;
}Frequently asked questions
- Is Flip Card free for commercial use?
- Yes. Flip Card is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Flip Card accessible and performant?
- Yes. The card is a real toggle button with aria-pressed, the back-facing side is inert and aria-hidden so Tab and assistive tech only reach the visible face, and the flip animates transform only for zero layout shift. Reduced-motion users get an opacity crossfade with no rotation, and the front face is readable with no JavaScript.
- Can I put buttons or links inside the faces?
- No. The faces are informational text and images only. A control on a face that is turned away would be a hidden focus trap, so interactive content inside the faces is intentionally out of scope.