Faq

Frequently-asked-questions accordion. Composes the canonical Accordion primitive into a single-prop API: pass an array of {question, answer} and get the full disclosure pattern (keyboard, ARIA, animation) inherited from Accordion → Base UI.

marketingclient≥ 320pxuiv1.0.0

Faq — live renderblocks-faq--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/faq.json

With the @interlace alias

npx shadcn@latest add @interlace/faq

History

This component is at v1.0.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.

Import

2 named exports — pull the parts you need.

Public API

import { FAQ, MIN_VIEWPORT } from '@/components/ui/patterns/faq';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

<section data-slot="faq" data-min-viewport="320">
    <Container>
      <Typography variant="h2">{title}</Typography>
      <Accordion>{questions.map(...)}</Accordion>
    </Container>
  </section>

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

FAQProps

Also accepts every <section> attribute.

Prop	Type	Description
title	React.ReactNode	—
lead	React.ReactNode	—
items	FAQItem[]	—
multiple	boolean	Whether more than one item can be open at a time. Defaults to `false` (single-open).
loading	boolean	When true, render a placeholder list of card skeletons.
loadingCount	number	Skeleton count when loading. Defaults to 4.

Skeleton

Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.

Faq — loading stateblocks-faq--loading ↗

Usage

<FAQ loading={isPending} />

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Not focusable — no focus indicator required.
Reduced motion: No animation to gate.
ARIA in the source: None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

2 more states from the same story file.

multipleblocks-faq--multiple ↗

loadingblocks-faq--loading ↗

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Rule	Concept	Where
R4	Extends native el	`React.ComponentProps<'section'>` + FAQ props
R6	data-slot on root	`data-slot="faq"`
R10	Composition seam (questions)	Array<{question, answer}>
R14	Declares min viewport	`data-min-viewport={String(MIN_VIEWPORT)}` + exported const
R18	Tailwind only	Zero inline `style`
R19	Tokens only	Container + Accordion own all tokens
R25	Client component	Accordion is client-tier
R26	A11y from Accordion	Accordion owns disclosure ARIA

Minimum viewport

This primitive declares MIN_VIEWPORT = 320 CSS px (DESIGN_PRINCIPLES #14). When mounted in a container narrower than this, the preflight contract draws a dev-mode outline so the regression is visible during local development.

Opt-in to the dev-mode warning

<body data-interlace-dev>...</body>

Add the data-interlace-dev attribute to the body in development builds only — preflight then outlines any primitive whose container is below its declared data-min-viewport.

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: none
Registry dependencies: @interlace/theme
@interlace/accordion
@interlace/cn
@interlace/container
@interlace/skeleton
@interlace/stack
@interlace/typography

Source

The full implementation — components/ui/patterns/faq.tsx once installed.

131 lines · TypeScript

github ↗

'use client';

import * as React from 'react';

// @interlace/faq v1.0.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/faq
// What changed since: https://ds.interlace.tools/c/faq#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — FAQ
 *
 * Frequently-asked-questions accordion. Composes the canonical Accordion
 * primitive into a single-prop API: pass an array of {question, answer}
 * and get the full disclosure pattern (keyboard, ARIA, animation)
 * inherited from Accordion → Base UI.
 *
 * ## Anatomy
 *
 *   <section data-slot="faq" data-min-viewport="320">

…111 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/faq.json

Faq

Preview