3D Flip Cards

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq42.tsx instead.

Usage

The file also exports faq42Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq42, faq42Demo } from "@/components/blocks/faq/faq42";

export default function Page() {
  return <Faq42 {...faq42Demo} />;
}

Props

Types

interface FlipCardItem {
  question: string;
  answer: string;
}

Behavior notes

• "use client" because each card tracks its own flipped state in local React state, toggled by a real <button>.
• Implemented as click-to-flip rather than hover-to-flip, since hover alone isn't reachable by keyboard or touch; the whole card is a real aria-expanded button so it works with a keyboard and screen reader.
• The 3D effect itself is pure CSS: [transform-style:preserve-3d] on the flipping wrapper, [backface-visibility:hidden] on both faces, and a conditional [transform:rotateY(180deg)] class swap driven by state, no animation library involved.