Library

Flip Card

Flip Card

3D card flip on hover or click with spring physics. Front and back faces use CSS preserve-3d and backface-visibility for true 3D rotation.

3dfliphoverspring

Installation

bash
# Copy flip-card.tsx to your project
cp components/ui/flip-card.tsx your-project/components/ui/flip-card.tsx

How to use

tsx
import { FlipCard } from "@/components/ui/flip-card";
tsx
<FlipCard
  widthClass="w-64"
  heightClass="h-80"
  front={
    <div className="h-full bg-gradient-to-br from-violet-500 to-fuchsia-600 flex items-center justify-center">
      <h3 className="text-xl font-bold text-white">Front</h3>
    </div>
  }
  back={
    <div className="h-full bg-zinc-900 flex items-center justify-center p-6">
      <p className="text-zinc-300">Back content here</p>
    </div>
  }
/>

Dependencies

framer-motion

Exports

FlipCard

File

components/ui/flip-card.tsx
Preview

Hover over the cards to flip them

Creative

Hover to flip

Bring your ideas to life with smooth animations and delightful interactions.

Composable

Hover to flip

Stack and combine components to build complex interfaces from simple parts.

Performant

Hover to flip

GPU-accelerated animations with spring physics for buttery smooth 60fps.

Made with