Sidebar

A powerful, composable sidebar component that automatically manages mobile flyout states and desktop collapse logic.

Building a good sidebar is one of the hardest parts of dashboard development. It requires managing state across completely different structural elements, handling viewport resizing, and animating complex CSS properties smoothly. This SidebarBlock utilizes React Context to handle all of this internally.

Click the collapse trigger in each preview's header to watch the labels hide and the icons centre — hover a collapsed icon and its label appears in a Tooltip. Switch a preview to the phone size and the sidebar becomes a dismissible flyout instead.

Sidebar

Wrap the shell in SidebarProvider, then compose header, groups and footer.

color: on the provider themes every active item below it.
active: on a SidebarItem is what highlights it in that colour.
label: on a SidebarGroup is the uppercase cluster header — it hides itself when collapsed.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Sidebar

npx shadcn@latest add @algorize-ui/sidebar

components/custom/blocks/SidebarBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Sidebar to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

tooltip is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/tooltip

Examples

Collapsed rail

SetdefaultExpanded{false}: to boot straight into the icon rail — item icons centre themselves and labels become hover tooltips.

Props Reference

Component	Prop	Type	Description
`SidebarProvider`	`defaultExpanded`	`boolean`	Sets the initial desktop state. Defaults to `true`.
`SidebarProvider`	`color`	`string`	Applies the UI kit's theme color to active items. (e.g. `"indigo"`, `"rose"`).
`Sidebar`	`variant`	`"attached" \| "floating"`	Determines if the sidebar is pinned flat against the edge (attached) or acts like an elevated, floating island panel.
`SidebarBrand`	`icon`	`ReactNode`	The logo icon. The text children passed to this component will automatically hide with a smooth transition when the sidebar collapses.
`SidebarGroup`	`label`	`string`	Optional uppercase header text for a cluster of links. Automatically hides when the sidebar collapses.
`SidebarItem`	`icon`	`ReactNode`	The icon graphic placed on the left side of the item. Automatically centers when collapsed.
`SidebarItem`	`active`	`boolean`	Highlights the item using the Provider's selected theme `color`.
All Components	`className`	`string`	Standard Tailwind overrides for layout, margin, or padding.