Vertical Tab Panel

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

Usage

The file also exports faq54Demo, 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 { Faq54, faq54Demo } from "@/components/blocks/faq/faq54";

export default function Page() {
  return <Faq54 {...faq54Demo} />;
}

Props

Types

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

type FaqCategory = {
  label: string;
  items: QaItem[];
};

Behavior notes

• Real interactivity: clicking a category tab in the left column updates the active index in state, swapping the entire right panel's list of Q&A entries.
• The first category is active by default; tabs expose role="tab"/aria-selected and the panel uses role="tabpanel".
• Entries within the active category are all shown open at once, there is no nested accordion on top of the category switch.
• The tab list scrolls horizontally on small screens and stacks vertically from the sm breakpoint up.