FAQs
FAQ by category
Two FAQ blocks under one header, grouped by topic, each its own details group so one open answer per group.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Container, FAQ, Section } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Container, FAQ, Section } from '@the_viveksingh/vivek-ui'
const FAQS = [
{
id: 'deps',
question: 'Really no runtime dependencies?',
answer:
'None. The package.json has no dependencies field at all. React and React DOM are peers you already have.',
},
{
id: 'tailwind',
question: 'Does it work alongside Tailwind?',
answer:
'Yes. Every selector is wrapped in :where(), so any utility class you add wins without !important.',
},
{
id: 'rsc',
question: 'Does it work with React Server Components?',
answer: "Yes. The build is unbundled, so each file keeps its own 'use client' directive.",
},
{
id: 'licence',
question: 'What is the catch with the licence?',
answer:
'There is none. MIT, including commercial use, with no attribution beyond the licence text.',
},
{
id: 'browsers',
question: 'Which browsers?',
answer:
'The last two versions of everything evergreen. Container queries and :has() are the floor.',
},
{
id: 'a11y',
question: 'How is accessibility tested?',
answer:
'Every component test has an axe assertion, and the browser suite runs axe on the composed pages in three viewports.',
},
]
export default function FaqCategorised() {
return (
<Section>
<Container>
<Section.Header eyebrow="Help centre" title="Answers by topic" align="center" />
</Container>
<FAQ
padding="sm"
title="Getting started"
headingLevel={3}
items={FAQS.slice(0, 3)}
name="start"
/>
<FAQ
padding="sm"
title="Compatibility"
headingLevel={3}
items={FAQS.slice(3)}
name="compat"
/>
</Section>
)
}