Flip Card

A hover-triggered 3D flip wrapper that accepts two shadcn Card components as its front and back faces and applies a smooth Y-axis rotation on hover, inspired by Kokonut UI’s Card Flip .

Installation

npx shadcn@latest add https://prismaui.com/components/flip-card.json

Import


import { FlipCard } from '@/components/ui/flip-card';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card';

Preview

Front Face

Hover to reveal the back.

This is the front side of the card.

Back Face

Content revealed on hover.

The back face can have a completely different style.


<FlipCard
  className='h-70 w-75'
  front={
    <Card className='h-full'>
      <CardHeader>
        <CardTitle>Front Face</CardTitle>
        <CardDescription>Hover to reveal the back.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className='text-sm text-muted-foreground'>
          This is the front side of the card.
        </p>
      </CardContent>
    </Card>
  }
  back={
    <Card className='h-full bg-primary text-primary-foreground'>
      <CardHeader>
        <CardTitle>Back Face</CardTitle>
        <CardDescription className='text-primary-foreground/70'>
          Content revealed on hover.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className='text-sm text-primary-foreground/70'>
          The back face can have a completely different style.
        </p>
      </CardContent>
    </Card>
  }
/>

With Actions

Pricing

Pro

Hover to see what's included.

$29/mo

What's included

✓ Unlimited projects
✓ Priority support
✓ Custom domain


<FlipCard
  className='h-[300px] w-[300px]'
  front={<Card className='h-full'>...</Card>}
  back={<Card className='h-full'>...</Card>}
/>

Usage Notes

The FlipCard container requires an explicit height (and optionally width) via className — e.g. className="h-70 w-75".
Both front and back Cards should include className="h-full" to fill the container.
The flip is triggered on hover (group-hover). No JavaScript state is needed.

Props

Prop	Type	Default	Description
`front`	`React.ReactNode`	—	Content rendered on the front face
`back`	`React.ReactNode`	—	Content rendered on the back face
`className`	`string`	—	Applied to the outer container (set height here)