Gradient Sidebar
Full-featured sidebar with animated drifting gradient orbs, hierarchical menus, sliding active indicator, and collapsible layout.
Dashboard
Navigate the sidebar to switch views.
Installation
npx shadcn@latest add https://wise-ui.com/r/gradient-sidebar.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | GradientSidebarSection[] | - | Array of sections, each with optional `title` and `items`. |
| activeId | string | - | ID of the currently active item (sliding highlight). |
| onItemClick | (item: GradientSidebarItem) => void | - | Called when any item is clicked. |
| header | ReactNode | - | Brand/logo slot rendered at the top. |
| footer | ReactNode | - | User/profile slot rendered at the bottom. |
| collapsed / defaultCollapsed | boolean | false | Controlled or uncontrolled collapse state. |
| onCollapsedChange | (collapsed: boolean) => void | - | Called when the collapse state changes. |
| width | number | 256 | Expanded sidebar width in pixels. |
| collapsedWidth | number | 64 | Collapsed sidebar width in pixels. |
| colorA / colorB / colorC | string | teal / purple / teal-accent | Colors for the three animated gradient orbs. |
| overlayOpacity | number | 0.55 | Opacity of the semi-transparent backdrop overlay. |