Tabbed FAQ

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/faq72.tsx instead.

Usage

The file also exports faq72Demo, 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 { Faq72, faq72Demo } from "@/components/blocks/faq/faq72";

export default function Page() {
  return <Faq72 {...faq72Demo} />;
}

Props

Types

type Faq72Item = {
  question: string;
  answer: string;
};

type Faq72Category = {
  label: string;
  items: Faq72Item[];
};

Behavior notes

• "use client" because clicking a tab really switches the visible category, and each question is a real accordion trigger.
• This repo has no Tabs primitive, so the tab strip is hand-written as a row of toggle-style buttons with role="tablist"/role="tab" and aria-selected reflecting the active category.
• Switching tabs resets the accordion's open item back to closed for the newly selected category, which keeps the interaction simple and avoids stale open-index bugs across categories of different lengths.
• Only one question is open at a time within the active category's accordion.