Components
Sidebar
A sidebar component for displaying navigation and other content, built with Base UI components.
Loading
Installation
pnpm dlx shadcn@latest add @toui/sidebar
Pattern
Tokens
7 CSS variables in 5 categories.
width
| CSS Variable | Value | Description |
|---|---|---|
--sidebar-width-collapsed | 3.5rem | 56px — icon-only |
--sidebar-width-default | 16rem | 256px — default |
--sidebar-width-wide | 20rem | 320px — wide |
header-height
| CSS Variable | Value | Description |
|---|---|---|
--sidebar-header-height | 3.5rem | — |
footer-height
| CSS Variable | Value | Description |
|---|---|---|
--sidebar-footer-height | 3.5rem | — |
px
| CSS Variable | Value | Description |
|---|---|---|
--sidebar-px | var(--component-px-md) | — |
gap
| CSS Variable | Value | Description |
|---|---|---|
--sidebar-gap | var(--component-gap-sm) | — |
API Reference
This component is based on the Base UI Meter primitive.