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"
  defaultOpen={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.',
    },
  ]}
/>

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[]`	—	—
`defaultOpen`	`number`	—	Index of the item to render open on first paint. Server-rendered as the native `open` attribute, so there is nothing to hydrate.
`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.

Rendering

Server safe

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