Card Flip

Renders a card component with flip animation, supporting front/back content.

Installation

npx shadcn@latest add @scrollxui/card-flip

Usage

import {
  CardFlip,
  CardFlipFront,
  CardFlipBack,
  CardFlipHeader,
  CardFlipFooter,
  CardFlipTitle,
  CardFlipDescription,
  CardFlipContent,
  CardFlipAction,
} from '@/components/ui/card-flip';

<CardFlip>
  <CardFlipFront>
    <CardFlipHeader>
      <CardFlipTitle>Front Title</CardFlipTitle>
    </CardFlipHeader>
    <CardFlipContent>
      <p>Front Content</p>
    </CardFlipContent>
  </CardFlipFront>
 
  <CardFlipBack>
    <CardFlipHeader>
      <CardFlipTitle>Back Title</CardFlipTitle>
    </CardFlipHeader>
    <CardFlipContent>
      <p>Back Content</p>
    </CardFlipContent>
  </CardFlipBack>
</CardFlip>

Changelog

04-11-2025, Safari CardFlip Bug

Fixed a Safari-specific issue where the Info and X buttons were not hiding correctly during card flip transitions.
Improved compatibility by adding WebkitBackfaceVisibility and refining transformStyle for smoother 3D rendering in Safari.
Enhanced transition handling for button opacity and pointer events to ensure consistent behavior across all browsers.
Verified consistent and stable performance in Chrome, Safari, and Edge.

API Reference

Card Flip

Renders a card component with flip animation, supporting front/back content.

Props

Property	Type	Default	Description
`className`	string	`—`	Custom CSS classes for the root card container.
`...props`	div props	`—`	All standard HTML div attributes.
`children`	ReactNode[]	`—`	Front and back card content as two nodes.
`CardFlipFront`	React.ReactNode	`—`	Front side of the card, containing main content.
`CardFlipBack`	React.ReactNode	`—`	Back side of the card, shown on flip.
`CardFlipHeader`	React.ReactNode	`—`	Header section inside front or back card.
`CardFlipTitle`	React.ReactNode	`—`	Title inside the header section.
`CardFlipDescription`	React.ReactNode	`—`	Description inside the header section.
`CardFlipAction`	React.ReactNode	`—`	Action element (e.g., button) in the header.
`CardFlipContent`	React.ReactNode	`—`	Main content area inside the card.
`CardFlipFooter`	React.ReactNode	`—`	Footer section inside the card.