Documentation navigation with a search field, collapsible groups that animate their height, nested links on a connected guide line and a marker that follows the active page.
Installation
Add the package to your project.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-docs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-docs.tsx.
import { SidebarDocs } from "@/components/hyperblur/sidebar-docs"
<div style={{ height: 520 }}><SidebarDocs defaultActive="installation" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id: string; title: string; items: { id: string; label: string; href?: string; badge?: string; children?: SidebarDocsLink[] }[] }[] | sample docs | Groups of links. `badge` renders a small pill such as New. `children` render as an indented sub list. |
| active | string | Controlled active link id. Drive it from a scroll observer for scroll spy behavior. Its group opens and the link scrolls into view. | |
| defaultActive | string | Initial active link id when uncontrolled. | |
| onChange | (id: string) => void | Called when a link is chosen. | |
| openGroups | string[] | Controlled list of open group ids. Pair with onOpenGroupsChange. | |
| defaultOpenGroups | string[] | all groups | Groups that start open when uncontrolled. |
| onOpenGroupsChange | (ids: string[]) => void | Called when a group is opened or closed. | |
| search | boolean | true | Show the search field. Typing filters links and opens every group with a match. |
| placeholder | string | "Search docs" | Placeholder and accessible label of the search field. |
| rowHeight | number | 30 | Height of group headers and links in pixels. |
| color | string | "#2f7bff" | Accent color for the active marker, badges and focus rings. |