Grouped FAQ Columns

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button 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/faq81.tsx instead.

Usage

The file also exports faq81Demo, 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 { Faq81, faq81Demo } from "@/components/blocks/faq/faq81";

export default function Page() {
  return <Faq81 {...faq81Demo} />;
}

Props

Types

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

type FaqColumn = { label: string; items: FaqItem[] };

Behavior notes

• Each column keeps its own independent 'which item is open' state; expanding a question in the left column has no effect on the right column and vice versa.
• Only one question per column can be open at a time; both columns start fully collapsed.
• The closing CTA button is a rounded, outline-variant button with no href or onClick, it's a decorative placeholder for a real support flow that would need a backend.
• This is a real 'use client' component; demo props live in the separate faq81.demo.tsx file so the live block preview (rendered from a Server Component) receives real data instead of undefined.