# FAQ Accordion

> Expandable answers with a human escape hatch at the end.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/faq-accordion).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/faq-accordion
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/faq-accordion-light-89c794f98382a82e.png
- Registry item: https://blockforge.terravidhal.me/r/faq-accordion.json
- Categories: faq
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/faq-accordion.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `accordion`

## Files

### `registry/blocks/faq-accordion.tsx`

```tsx
import Link from "next/link";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const faqs = [
  {
    question: "How long does setup take?",
    answer:
      "Most teams are live in under ten minutes: install the CLI, connect your repo, push. The first deploy configures everything else.",
  },
  {
    question: "Can I bring my own domain?",
    answer:
      "Yes — add it in settings and we handle DNS verification and certificates automatically, including wildcard subdomains.",
  },
  {
    question: "What happens if I exceed my plan?",
    answer:
      "Nothing breaks. We notify you at 80% and 100% of quota, and you choose whether to upgrade or throttle. No surprise invoices.",
  },
  {
    question: "Do you support monorepos?",
    answer:
      "First-class. Point us at the workspace root and each app gets its own pipeline, previews and environment variables.",
  },
];

export default function FaqAccordion() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-2xl px-6 py-20 sm:py-24">
        <h2 className="text-center text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Questions, answered
        </h2>

        <Accordion className="mt-10">
          {faqs.map((faq) => (
            <AccordionItem key={faq.question} value={faq.question}>
              <AccordionTrigger>{faq.question}</AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>

        <p className="mt-8 text-center text-sm text-muted-foreground">
          Still stuck?{" "}
          <Link
            href="#"
            className="font-medium text-foreground underline-offset-4 hover:underline"
          >
            Talk to a human
          </Link>{" "}
          — we answer within a day.
        </p>
      </div>
    </section>
  );
}
```