Skip to content
txbrendan/ui

FAQ

beta

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

Built from Accordion.

Preview

several open at once

narrow container

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

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

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

    npx shadcn@latest add @txbrendan/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

    The questions, in the order people ask them. Each question must be unique, since it is the key.

    { question: string; answer: ReactNode }[]

  • multiple

    Lets more than one answer be open at once.

    boolean · default false

  • className

    Extra classes on the root, which holds the container query.

    string

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

<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." },
  ]}
/>