Skip to content
UI Kit
Accent color

FAQ sections with accordion and schema

Frequent questions as native accordions, grids, tabs and a search, with optional FAQPage data.

7 variants
Switch category

Accordion, grid or search

An FAQ section takes the last doubts off the table, right before the call to action. Every variant here builds on the native details element, so the answers are in the HTML, open with the keyboard and read without JavaScript. Search engines see every answer, and the optional FAQPage data marks them up as questions.

Accordion is the default for five to twelve questions. Two columns and Open grid show short answers at once and suit pages with few, important questions. With topics groups a long FAQ by subject, With search helps when there are more than twenty. Side heading puts the title next to the list on desktop, With contact card ends with a person for the questions that are still open.

Write the questions the way customers ask them, in their words. Keep answers to two or three sentences and link to the page with the details. Use FAQPage data only for questions that stand visibly on the page, the components only emit it for the questions they render.

FAQ

Accordion

One centered column. Opens without JavaScript, one answer at a time.

Open in Studio

Two columns

The questions in two columns under a split heading.

Open in Studio

Open grid

Every answer visible, numbered, in a hairline grid.

Open in Studio

With topics

Tabs per topic with icons, arrow keys move between them.

Open in Studio

Side heading

The heading sticks on the left while the questions scroll on the right.

Open in Studio

With contact card

Questions with a card next to them to reach a person.

Open in Studio

Details

What FAQ brings along, read from the registry and the source.

Area
Marketing
Variants
7
Version
1.0.0 · since 1.0.0
File
components/ui/faq.tsx
Brings along
utilskitbuttoniconrevealsectionmotion
npm packages
None
Languages
English and German, 8 texts of its own
Studio
All 7 variants editable
In collections
SaaS landing pageMedical practiceEvent
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The FaqProps interface from components/ui/faq.tsx, with the comments from the code.

  • variantoptional
    FaqVariant

    accordiontwo-columngridwith-categorieswith-searchside-headingwith-contact-card

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsrequired
    FaqItem[]
  • categoriesoptional
    { name: string; icon?: IconName }[]

    with-categories: order and icons of the tabs. Without it the order of appearance is used.

  • contactoptional
    FaqContact

    Contact card (with-contact-card) or the line under search results (with-search)

  • defaultOpenoptional
    number

    Index of the item that starts open, e.g. 0 for the first. Without it every item starts closed.

  • schemaoptional
    boolean

    Adds FAQPage structured data for search engines

Built-in texts

FAQ writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 8 texts
searchEnglish Search questionsGerman Fragen durchsuchen
placeholderEnglish Search, e.g. “export”German Suchen, etwa „Export“
resultsEnglish {n} answersGerman {n} Antworten
resultEnglish 1 answerGerman 1 Antwort
noneEnglish No answer for “{q}” yet.German Zu „{q}“ gibt es noch keine Antwort.
noneHintEnglish Write to us, we usually reply within a few hours.German Schreib uns, wir antworten meist innerhalb weniger Stunden.
clearEnglish Clear searchGerman Suche leeren
categoriesEnglish TopicsGerman Themen

Accessibility

Read from the source of the component.

  • FAQ handles the keys Arrow up, Arrow down, Arrow left, Arrow right, Home, End and Space itself.
  • Sets aria-controls, aria-describedby, aria-label, aria-labelledby, aria-live and aria-selected, so screen readers announce purpose and state.
  • Uses the roles search, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 10 places in the code switch motion off then.

Frequent questions

How do I install FAQ?

With aiw add @ai-website/faq. The command puts components/ui/faq.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section and motion. It needs no further npm packages.

Which variants does FAQ have?

7 variants, Accordion, Two columns, Open grid, With topics, With search, Side heading and With contact card. You pick one with the variant prop, for example variant="two-column".

Can I translate the texts of FAQ?

Yes. FAQ carries 8 texts of its own in English and German, such as “Search questions”, “Search, e.g. “export”” and “1 answer”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with FAQ?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find FAQ with aiw_components and install it with aiw_add @ai-website/faq. Name the variant in your prompt, for example variant="accordion", and the assistant writes your content straight into the props.

Can I adjust FAQ without code?

Yes, in the Studio. All 7 variants are editable there, texts, lists and switches. The Studio writes the matching Faq code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to FAQ on a page.

Often searched

Jump to

Copied to the clipboard