Card Flip

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

previewcode

Best Seller

4.5 (126)

Stridera Quantum Aero

$9,499

What is your size?

34353637

Buy Now

Stridera Quantum Aero

Futuristic leather sneakers

Upper

Premium leather, breathable

Sole

Carbon-infused, adaptive grip

Comfort

Memory foam heel

Package

Sneakers, dust bag, extra laces

Extras

Reflective trims for night visibility

Free express shipping over $2,999

Installation

npx shadcn@latest add https://scrollxui.dev/registry/card-flip.json 

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