Skip to content
Docs
Flipping cards

Flipping cards

A list of flip cards arranged, each card representing an item or concept. Hovering on a card flips it to reveal additional details.

requires interactionhover
Loading...

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/list/flipping-cards.json

Manual

Install dependencies

This uses Flip Card for the hover flip. Install it by following its installation steps.

Run the following command

It will create a new file called flipping-cards.tsx inside the components/animata/list directory.

mkdir -p components/animata/list && touch components/animata/list/flipping-cards.tsx

Paste the code

Open the newly created file and paste the following code:

import type { ComponentProps } from "react";
 
import FlipCard, { FlipCardBack, FlipCardFront } from "@/animata/card/flip-card";
import { cn } from "@/lib/utils";
 
type FlippingCardsRootProps = ComponentProps<"div">;
 
function FlippingCardsRoot({ className, ...props }: FlippingCardsRootProps) {
  return <div className={cn("grid grid-cols-3 gap-5 max-sm:grid-cols-2", className)} {...props} />;
}
 
type FlippingCardsItemProps = ComponentProps<typeof FlipCard>;
 
function FlippingCardsItem({ className, ...props }: FlippingCardsItemProps) {
  return (
    <FlipCard className={cn("h-60 w-48 [&>div]:rounded-none", className)} rotate="y" {...props} />
  );
}
 
const FlippingCardsItemWithFaces = Object.assign(FlippingCardsItem, {
  Front: FlipCardFront,
  Back: FlipCardBack,
});
 
const FlippingCards = Object.assign(FlippingCardsRoot, {
  Item: FlippingCardsItemWithFaces,
}) as typeof FlippingCardsRoot & {
  Item: typeof FlippingCardsItemWithFaces;
};
 
export function getFlippingCardsAccent(_index: number) {
  return "hsl(var(--accent))";
}
 
export default FlippingCards;
export { FlippingCards, FlippingCardsItemWithFaces as FlippingCardsItem };

Usage

FlippingCards is bare bones: a responsive grid wrapper and sized flip items. Each FlippingCards.Item wraps Flip Card mechanics — use Item.Front and Item.Back for face markup.

The Storybook demo shows a typography grid with per-card accent colors via getFlippingCardsAccent(index).

import FlippingCards, { getFlippingCardsAccent } from "@/animata/list/flipping-cards";
 
<FlippingCards>
  {items.map((item, index) => (
    <FlippingCards.Item key={item.id}>
      <FlippingCards.Item.Front className="flex bg-white p-4">
        <span>{item.label}</span>
      </FlippingCards.Item.Front>
      <FlippingCards.Item.Back
        className="flex flex-col p-4"
        style={{ backgroundColor: getFlippingCardsAccent(index) }}
      >
        <p>{item.detail}</p>
      </FlippingCards.Item.Back>
    </FlippingCards.Item>
  ))}
</FlippingCards>

Override grid or card size with className on FlippingCards or each Item.

Changelog

  • 2026-06 — Replaced the list prop and inline 3D flip with composable FlippingCards.Item, Item.Front, and Item.Back built on Flip Card.

Credits

Built by Bibek Bhattarai

Edit this page on GitHub
Avatar ListMenu list