Flip Card

3D card flip with spring physics, supporting hover or click triggers.

npx uniqueui add flip-card

Preview

Hover to flip →

Back side! ✨

Click to flip

Click again!

Usage

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-8 items-center justify-center p-10 text-white">
      <FlipCard
        className="w-60 h-40"
        front={
          <div className="flex items-center justify-center h-full bg-zinc-900 rounded-xl border border-zinc-800">
            <p className="text-lg font-bold">Hover to flip →</p>
          </div>
        }
        back={
          <div className="flex items-center justify-center h-full bg-gradient-to-br from-purple-900 to-indigo-900 rounded-xl">
            <p className="text-lg font-bold text-purple-200">Back side! ✨</p>
          </div>
        }
      />
      <FlipCard
        className="w-60 h-40"
        trigger="click"
        front={
          <div className="flex items-center justify-center h-full bg-zinc-900 rounded-xl border border-zinc-800">
            <p className="text-lg font-bold">Click to flip</p>
          </div>
        }
        back={
          <div className="flex items-center justify-center h-full bg-zinc-800 rounded-xl border border-zinc-700">
            <p className="text-lg font-bold text-green-400">Click again!</p>
          </div>
        }
      />
    </div>
  );
}

Props

Prop	Type	Description
`front`	`React.ReactNode`	The leading visible standard interface node.
`back`	`React.ReactNode`	The trailing hidden secondary information node.
`className`	`string`	Overarching classes driving constraints on the 3D rotating canvas.
`frontClassName`	`string`	Granular overrides for the un-rotated visual state.
`backClassName`	`string`	Granular overrides targeting the inverted 180-degree state representation.
`trigger`	`"hover" \| "click"`	Enum literal targeting 'hover' execution or explicit 'click' toggles.
`direction`	`"horizontal" \| "vertical"`	Axis orientation literal mapping rotation logic to 'horizontal' vs 'vertical'.
`perspective`	`number`	Z-depth translation simulating three-dimensional depth stretching.