Grouped sidebar sections that expand with animated height, stagger their items in and can remember which ones were open.
Projects / Roadmap
Q4 roadmap
npx shadcn@latest add https://hyperblur.dev/r/sidebar-sections-accordion.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-sections-accordion.tsx.
import { SidebarSectionsAccordion } from "@/components/hyperblur/sidebar-sections-accordion"
<SidebarSectionsAccordion persistKey="app-nav" defaultOpen={["projects", "team"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| sections | { id: string; title: string; icon?: SidebarSectionsIconName; badge?: string | number; items: { id: string; label: string; badge?: string | number }[] }[] | Projects, Team, Billing, Developers | Sections and their items. The badge value New gets a green tag. |
| open | string[] | Controlled list of open section ids. Pair with onOpenChange. | |
| defaultOpen | string[] | ["projects"] | Sections open at first when uncontrolled. |
| onOpenChange | (open: string[]) => void | Called whenever a section opens or closes. | |
| multiple | boolean | true | Allow several sections open at once. When false, opening one closes the others. |
| persistKey | string | localStorage key used to remember open sections between visits. Read after hydration, so server output stays stable. | |
| active | string | Controlled active item id. Pair with onChange. | |
| defaultActive | string | "" | Initially active item id when uncontrolled. |
| onChange | (id: string) => void | Called when an item is chosen. | |
| title | string | Optional heading above the sections. | |
| accent | string | "#2f7bff" | Accent for open section icons, the active item and focus rings. |