Nested Accordion
A nested accordion pattern with a fixed-height inner scroll area, hidden scrollbar, keyboard scrolling, and shadcn/ui accordion primitives.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { AccordionMultiLevel } from '@/components/component-kit/items/accordion-multi-level';
export function Example() { return ( <AccordionMultiLevel items={[{ id: "project", title: "Your project", children: [{ id: "setup", title: "Getting started", content: "Clone, install and build." }] }]} /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MultiLevelAccordionItem[] | — | Parent groups with nested sections. |
parentMultiple | boolean | false | Allow multiple parent sections to open. |