Back to Components
Cards

Flip Card

3D card component that flips on hover or click to reveal content on the back. Supports both horizontal and vertical flip animations.

Design

Craft beautiful interfaces with accessible primitives.

Performance

Optimized for speed and minimal bundle size.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/flip-card.tsx

Installation

Using shadcn CLI

npx shadcn add flip-card --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge