Sections

Faq

A frequently-asked-questions list built on native `<details>`/`<summary>`.

Server safeSource

Import

import { FAQ } from '@the_viveksingh/vivek-ui'

Questions and answers

Wraps Accordion in a Section, so the whole block is one component. answer takes a node when the answer needs a link or a list.

Does it really have zero runtime dependencies?

Yes. There is no dependencies field in package.json. react and react-dom are peers, and every utility - class merging, refs, focus trapping, positioning - is written in-house.

Can I override the styles?

Every library selector is wrapped in :where(), so it has zero specificity. A single flat class of yours beats it without !important.

Does it work with React Server Components?

Forty-four components render on the server with no client boundary at all. The rest carry their own directive, preserved file by file by an unbundled build.

What does it cost?

Nothing. It is MIT licensed, including for commercial work.

<FAQ
  eyebrow="FAQ"
  title="Questions people actually ask"
  defaultOpenIndex={0}
  items={[
    {
      id: 'deps',
      question: 'Does it really have zero runtime dependencies?',
      answer: 'Yes. There is no dependencies field in package.json.',
    },
    {
      id: 'override',
      question: 'Can I override the styles?',
      answer: 'Every selector is wrapped in :where(), so one flat class of yours wins.',
    },
  ]}
/>

Two columns, header beside

columns={2} splits the list once the section is wide enough; layout="side" puts the header in a narrow start column with the questions beside it. Both fall back to one stack below 48rem.

Does it really have zero runtime dependencies?

Yes. There is no dependencies field in package.json. react and react-dom are peers, and every utility - class merging, refs, focus trapping, positioning - is written in-house.

Can I override the styles?

Every library selector is wrapped in :where(), so it has zero specificity. A single flat class of yours beats it without !important.

Does it work with React Server Components?

Forty-four components render on the server with no client boundary at all. The rest carry their own directive, preserved file by file by an unbundled build.

What does it cost?

Nothing. It is MIT licensed, including for commercial work.

<FAQ
  layout="side"
  columns={2}
  eyebrow="Support"
  title="Before you write in"
  description="The answers to the questions we get every week."
  items={faqs}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for FAQ
Prop	Type	Default	Description
`items`	`FaqItem[]`	—	—
`defaultOpenIndex`	`number`	—	Index of the item to render open on first paint. Server-rendered as the native `open` attribute, so there is nothing to hydrate. Named with `Index` because every other component's `defaultOpen` is a boolean — same name, different type, was a trap.
`name`	`string`	—	Shared `name` for every `<details>`, which makes the group mutually exclusive — opening one closes the others, natively. Supply a value unique to the page; it is opt-in rather than generated because ids cannot be minted in a Server Component.
`eyebrow`	`ReactNode`	—	A plain string becomes a pill `Badge`; a node is rendered as given.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`headingLevel`	`HeadingLevel`	—	Level of the section's own `title`, defaulting to `2`. Questions render one level below it — or at this level when the section has no title of its own.
`structuredData`	`boolean`	—	Emit schema.org `FAQPage` JSON-LD alongside the list. Default `true`. This is the markup an answer engine reads to quote a question and its answer directly, and it is derived 1:1 from the items rendered on the page — never from anything invisible, which is what Google's structured-data policy requires. Items whose `answer` is JSX are included only when they carry `answerText`. Nothing is emitted when the `children` escape hatch replaces the default layout, because the schema must describe what is actually visible.
`columns`	`1 \| 2`	—	Lay the questions out in two columns once the section is wide enough. Default `1`.
`layout`	`'stack' \| 'side'`	—	`side` puts the header beside the list on wide screens instead of above it. Default `stack`.

Rendering

Server safe

FAQ carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.