Flipping Card

A two-sided card component that flips on hover, revealing content on its back face. Ideal for interactive displays or showcasing additional information.

Preview

Hover over the cards to see the flip animation.

Breaking Bad

Breaking Bad - Sample description.

Stranger Things

Stranger Things - Sample description.

Squid Game

Squid Game - Sample description.

Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-flipping-card.json

Usage

Import FlippingCard and pass frontContent and backContent as React nodes. Works with IContentData (OTT) — use poster, name, and description for front/back content.

import { FlippingCard } from "@/components/ui/zezo-ui/Common/flipping-card"
import type { IContentData } from "@zezosoft/zezo-ott-api-client"

{contentData.map((item: IContentData) => (
  <FlippingCard
    key={item._id}
    width={300}
    frontContent={<OTTCardFront item={item} />}
    backContent={<OTTCardBack item={item} />}
  />
))}

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes for the card wrapper
width	number	350	Card width in pixels
height	number	300	Card height in pixels
frontContent	ReactNode	—	Content displayed on the front face
backContent	ReactNode	—	Content displayed on the back face (visible on hover)