# FAQ

> Questions and answers in one soft gray column, each answer opening in place.

- Name: `faq`
- Status: beta
- Categories: faq, questions, marketing
- Files: the install writes `faq.tsx`, and any part files named `faq-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/accordion`. The install adds them.
- Gallery: https://arbokui.com/website/faq
- Registry item: https://arbokui.com/r/faq.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the website component. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/faq
   ```

## Use it for

- Near the bottom of a landing or pricing page, under a Headline like "Questions people ask."
- Five to eight questions people really ask before they buy or sign up.
- Write each question the way a person would ask it, and answer it in two or three sentences.

## Avoid it for

- Long docs or setup steps. Link to a docs page from the answer instead.
- Sections inside an app, like settings. Use Accordion.
- Hiding prices, limits, or terms only in an answer. Put them on the page too.

## Props

- `items`: `{ question: string; answer: ReactNode }[]`. The questions, in the order people ask them. Each question must be unique, since it is the key.
- `multiple`: `boolean`. Default `false`. Lets more than one answer be open at once.
- `className`: `string`. Extra classes on the root, which holds the container query.

## Accessibility

- Built on Accordion: each question is a button inside an h3 that says whether its answer is open.
- Put it under an h2, like a Headline, so the question headings sit in order.
- Enter and Space open and close an answer. Closed answers are hidden from screen readers.
- In forced colors the column gets a border, so its edge still shows when its fill is painted away.

## Examples

### Under a headline

```tsx
<Headline title="Questions people ask." />
<Faq
  items={[
    { question: "Can people change their answer?", answer: "Yes, until the answer-by date." },
    { question: "Does the calendar stay in sync?", answer: "Calendar apps pick up changes on their next refresh." },
  ]}
/>
```