FAQs
FAQ with the header beside
layout="side" puts the header in a narrow column with the questions beside it — an editorial layout for a support page.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { FAQ } 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 { FAQ } 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 FaqSide() {
return (
<FAQ
layout="side"
eyebrow="Support"
title="Before you write in"
description="The answers to the questions we get every week. If yours is not here, the form is at the bottom."
items={FAQS}
/>
)
}