Sidebar — dir/ui

Compose workspace navigation with groups, links, and a mobile sheet.

# Sidebar

Compose workspace navigation with groups, links, and a mobile sheet.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/sidebar#v0.1.2
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. Theme CSS is imported by the UI modules. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

Wrap Sidebar and SidebarTrigger in SidebarProvider. Never mount either outside the provider.

## SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarMenuButton, SidebarTrigger

```tsx
import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarMenuButton, SidebarTrigger } from '@/components/ui/sidebar.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| children | ReactNode | Required |  |
| className | string | Required |  |
| openMobile | boolean | Required |  |
| setOpenMobile | (open: boolean) => void | Required |  |

Place all sidebar parts inside SidebarProvider. SidebarMenuButton requires label, a ReactNode icon (for example <Building2Icon />), and onClick; active, href, and shortcut are optional.