FAQs

Stacked FAQ

Questions in one column with the first open. Each item is a native details element, so it works before JavaScript.

1 components51 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

FAQ

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 FaqStack() {
  return (
    <FAQ
      eyebrow="FAQ"
      title="The ones people actually ask"
      items={FAQS}
      defaultOpenIndex={0}
      name="faq"
    />
  )
}

← All 62 blocks