Flip Card

Overview

The FlipCard component is an interactive UI card that flips on hover or interaction. It’s ideal for displaying dual-faced content, such as feature highlights, product details, or team info.

Key features include:

Flip Animation: Choose from flipY, flipX, or flipBoth.
Custom Content: Pass any JSX elements as front and back.
Styled Container: Easily apply custom styles via className.

Front

Back

Hello

Goodbye

🌞 Day

🌜 Night

CLI Installation

Ensure your project is using ShadCN and the custom UI system. Then run:

npx shadcn@latest add https://ui-chaiui.vercel.app/registry/flipcard.json

Manual Installation

To manually set up the FlipCard component in your project, follow these steps:

Go to your src directory.
Create a folder structure: components/ui/flipCard.
Inside the flipCard folder, create a file named flipCard.tsx.
Paste the following code into flipCard.tsx.

"use client";
 
import React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
import clsx from "clsx";
 
const flipCardVariants = cva("relative w-full h-full transition-transform duration-700 [transform-style:preserve-3d]", {
  variants: {
    animation: {
      flipY: "hover:[transform:rotateY(180deg)]",
      flipX: "hover:[transform:rotateX(180deg)]",
      flipBoth: "hover:[transform:rotateX(180deg)_rotateY(180deg)]"
    },
  },
  defaultVariants: {
    animation: "flipY",
  },
});
 
type FlipCardProps = React.HTMLAttributes<HTMLDivElement> & 
  VariantProps<typeof flipCardVariants> & {
    front?: React.ReactNode;
    back?: React.ReactNode;
  };
 
const FlipCard = ({
  animation,
  className,
  front,
  back,
  ...props
}: FlipCardProps) => {
  return (
    <div className="cursor-pointer w-64 h-40 [perspective:1000px]" {...props}>
      <div className={twMerge(clsx(flipCardVariants({ animation }), className))}>
        <div className="absolute w-full h-full bg-gray-500 text-white rounded-xl flex items-center justify-center text-xl backface-hidden overflow-hidden">
          {front ?? "Front"}
        </div>
        <div className="absolute w-full h-full bg-indigo-600 text-white rounded-xl flex items-center justify-center text-xl backface-hidden [transform:rotateY(180deg)] overflow-hidden object-cover">
          {back ?? "Back"}
        </div>
      </div>
    </div>
  );
};
 
export default FlipCard;

Usage

Import and use the FlipCard component like this:

 
import FlipCard from "@/components/ui/cards/flipCard";
 
export default function App() {
  return (
    <div className="p-10 flex gap-5 flex-wrap">
      <FlipCard front={<div className="text-xl font-bold">Hello</div>} back={<div className="text-xl font-bold">Goodbye</div>} />
      <FlipCard animation="flipX" front={<div className="p-4">🌞 Day</div>} back={<div className="p-4">🌜 Night</div>} />
    </div>
  );
}

Props

Prop	Type	Description	Default
`front`	`ReactNode`	Content displayed on the front of the flip card	`"Front"`
`back`	`ReactNode`	Content displayed on the back of the flip card	`"Back"`
`animation`	`string`	Animation style: flipY, flipX, or flipBoth	`"flipY"`
`className`	`string`	Additional Tailwind classes for the outer container	`""`