Docs-style accordion groups where only one opens at a time and its links hang from a curved branch line. A glowing bead slides to the current page while the line fills to show reading progress.
Error handling
Every error returns a type, a code and a request id you can quote to support.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-accordion-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-accordion-rail.tsx.
import { SidebarAccordionRail } from "@/components/hyperblur/sidebar-accordion-rail"
<SidebarAccordionRail defaultActive="webhooks" onChange={(id) => router.push(`/docs/${id}`)} />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id: string; label: string; icon?: SidebarAccordionRailIconName | ReactNode; items: { id: string; label: string; badge?: string }[] }[] | Getting started, Guides, Billing, Security | Groups with their links. Built-in icons: rocket, book, plug, shield, card, terminal. |
| active | string | Controlled current link id. Pair with onChange. | |
| defaultActive | string | first link | Initially current link when uncontrolled. |
| onChange | (id: string) => void | Called when a link is chosen. | |
| openGroup | string | null | Controlled open group id. null closes all. | |
| defaultOpenGroup | string | null | group of the current link | Initially open group when uncontrolled. |
| onOpenGroupChange | (id: string | null) => void | Called when a group header is toggled. | |
| heading | string | "Relay API" | Title at the top. |
| caption | string | "v4.2" | Small pill next to the title, such as a version. Empty hides it. |
| rowHeight | number | 30 | Height of each link row in pixels; the line and bead follow it. |
| footer | ReactNode | Content pinned under the groups. | |
| accent | string | "#2f7bff" | Accent for the open tile, progress line, bead and focus rings. |