# FAQ (Moonarc)

A heading and lead beside a native accordion: one question open at a time, heights animated by the browser, keyboard and screen reader handled by <details>. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/faq-section` (license key required)
- Tier B · category section · trigger scroll, click
- Readout: `<FaqSection items={[{ title, body }]}>`
- Browser support: newly (Chrome 131 · Firefox 143 · Safari 18.4); elsewhere: questions open and close instantly
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 9.9 kB raw)
- Page: https://moonarc.dev/components/faq-section/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `{ title, body }[]` | none | Questions; body is an HTML string. |
| `headline` | `string` | `'Questions'` | Section heading. |
| `copy` | `string` | none | Lead paragraph beside the list. |
| `open` | `number` | `0` | Index open on load. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'start'` | Heading beside the list, or centred above a narrower list. |

## Usage

```astro
---
import FaqSection from '@/components/moonarc/pro/FaqSection.astro';
---
<FaqSection
  headline="Questions people actually ask"
  copy="Short answers. The long ones are in the docs."
  items={[
    { title: 'Do you ship internationally?', body: '<p>Yes, to 40 countries, tracked.</p>' },
    { title: 'Can I change my order?', body: '<p>Within an hour of placing it, from the confirmation email.</p>' },
  ]}
/>
```

## Reduced motion

Fades in; questions open instantly.

## With ClientRouter

Native; nothing to rebind.

## Craft

- Exclusive by default: an FAQ with three answers open is a wall of text.
- The first question is open on load, so the reader sees what an answer looks like before clicking.
- Heading on the left and list on the right at 1 : 1.6, because the answers are the content.

## Replaces

- FAQ sections (Tailwind Plus)
- FAQ (shadcnblocks)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/faq-section` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: accordion, reveal.