Flip Card

A two-sided card that turns over in 3D on hover/focus, or on click/Enter. X or Y axis, springy easing.

css-3da11y2 files · 53 locdeps: clsx, tailwind-merge

SOLAR

Hover flip on the Y axis. Focus works too — tab to it.

OPUS BANKDEBIT

4242 •••• •••• 1029

Click to flip

CVV 123

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/flip-card.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs flip-card

import { FlipCard } from "@/components/opus/three/flip-card";

<FlipCard front={<Front />} back={<Back />} trigger="click" />

Prop	Type	Default	Description
front / back	ReactNode	—	Faces.
trigger	"hover" \| "click"	"hover"	How it flips.
axis	"y" \| "x"	"y"	Rotation axis.