# FAQ section

> A centered FAQ section — an accordion of common questions with a contact call-to-action footer.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/faq).

- Page, with a live preview: https://shadcn.exchange/r/quill/faq
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/faq-light-3a88f7bfa172f09b.png
- Registry item: https://www.quilldesignsystem.com/r/faq.json
- Categories: content, marketing
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/faq.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`, `button`

## Notes from the registry

A centered FAQ section — an accordion of common questions with a contact call-to-action footer. Do: Open the first question by default (defaultValue=['item-0']) so the section doesn't read as empty on load. Don't: Start every item collapsed and force a first click just to prove the section has content. Use accordion when you need a bare accordion with no marketing framing (heading, contact footer) around it. Use contact-form when the user needs to ask something not covered — this pattern only offers a CTA button, not the form itself.

## Files

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

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Button } from '@/components/ui/button'

const faqs = [
  {
    q: 'Can I use Quill in a commercial project?',
    a: 'Yes. The theme, tokens, and every pattern ship under a permissive license — attribution is appreciated, never required.',
  },
  {
    q: 'How do I install the theme?',
    a: 'One command: npx shadcn add with our registry URL. Tokens, dark mode, and typography come wired together.',
  },
  {
    q: 'Does dark mode come for free?',
    a: 'Every token has a dusk counterpart, so components and patterns flip automatically when data-theme is set to dark.',
  },
  {
    q: 'What about accessibility?',
    a: 'The system targets WCAG 2.1 AA. Every Storybook story runs an enforced axe audit, and contrast decisions are documented in the foundations.',
  },
]

/** A centered FAQ section — an accordion of common questions with a contact call-to-action footer. */
export function Faq() {
  return (
    <section className="flex w-[560px] flex-col gap-6">
      <div className="flex flex-col items-center gap-2 text-center">
        <span className="text-xs font-medium tracking-eyebrow uppercase text-ink-muted">FAQ</span>
        <h2 className="font-heading text-2xl text-foreground">Common questions</h2>
        <p className="text-sm text-muted-foreground">
          Everything else lives in the docs — or ask us directly.
        </p>
      </div>
      <Accordion defaultValue={['item-0']} className="w-full">
        {faqs.map((f, i) => (
          <AccordionItem key={i} value={`item-${i}`}>
            <AccordionTrigger>{f.q}</AccordionTrigger>
            <AccordionContent>{f.a}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      <div className="flex items-center justify-center gap-3 rounded-lg bg-card p-4 ring-1 ring-foreground/10">
        <span className="text-sm text-muted-foreground">Still curious?</span>
        <Button variant="outline" size="sm">
          Talk to the team
        </Button>
      </div>
    </section>
  )
}
```