A two-level FAQ: categories in a list on the left, the chosen category's questions as an accordion on the right, selected by URL hash such as #billing.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/faq-04.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Faq04 } from '@/components/faq-04/faq-04'
export default function Page() {
return (
<main>
<Faq04 />
</main>
)
}Files
What the command adds to your project, and where.
components/faq-04/faq-04.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Accordion.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in FAQ
- FAQ 01A heading with a way to reach a person on the left, eight questions in an accordion on the right.
- FAQ 02Questions in category tabs with a search field that filters and highlights as you type, and a "Still stuck?" card beside the list.
- FAQ 03One centred column of large questions with every answer showing, hairlines between them and a link and copy-link button for each question.
- FAQ 05A conversational FAQ in one column: Q: and A: pairs set with typographic markers and an indent, each with a remembered Was this helpful? Yes/No.