Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTwo levels of accordion for a help centre, categories outside and questions inside, with independent open states and the question count in each category's name.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for help centres and docs indexes with up to about six categories of up to eight questions.
Do not nest a third level, and do not use it for navigation. Large knowledge bases need search and their own pages.
It builds on accordion, which the CLI installs for you.
import { AccordionNested } from "@/components/accordion-nested"<AccordionNested
groups={[
{
id: "billing",
title: "Billing",
items: [{ id: "invoice", title: "Where are invoices?", content: "..." }],
},
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
groups | { id, title, items: { id, title, content }[] }[] | - | Categories and their questions. |
| Key | Action |
|---|---|
| Enter or Space | opens a category or a question |
| Tab | moves through the open headers in order |
The pattern ships a Testing Library test (accordion-nested.test.tsx) that covers counts in names, opening categories, independent questions and switching categories.