Sidebar

Collapsible glass sidebar shell with context state.

Sidebar

Home

Home dashboard

Toggle the sidebar with the button in the header — the icons stay visible when collapsed.

Installation

1pnpm dlx shadcn@latest add @glasswave/sidebar

Usage

1import {2  SidebarProvider,3  Sidebar,4  SidebarHeader,5  SidebarContent,6  SidebarFooter,7  SidebarGroup,8  SidebarGroupLabel,9  SidebarMenu,10  SidebarMenuItem,11  SidebarMenuButton,12  SidebarTrigger,13  useSidebar,14} from "glasswave";

Wrap layout with SidebarProvider (defaultOpen). useSidebar() returns { open, setOpen, toggle }.

Collapsed width is ~4.25rem; labels inside SidebarGroupLabel use sr-only when collapsed. Compose icons + text in SidebarMenuButton for icon-only collapsed mode.

This is a lightweight layout primitive—not the full app-router sidebar kit from shadcn v15.

API Reference

SidebarProvider

Prop	Type	Default
`defaultOpen`	`boolean`	`true`

SidebarMenuButton

Prop	Type	Default
`isActive`	`boolean`	`false`