Sidebar tokens
224px default (tighter than shadcn's 256px); 48px icon rail. SidebarProvider sets --sidebar-width / --sidebar-width-icon as inline CSS custom properties using these tokens so child components can reference var(--sidebar-width) without duplicating the values.
| Name | Light | Dark | Description | Tailwind utility |
|---|---|---|---|---|
--vueda-sidebar-width | 14rem | expanded desktop sidebar width. | ||
--vueda-sidebar-width-icon | 3rem | collapsed desktop icon rail width. | ||
--vueda-sidebar-width-mobile | 18rem | mobile sheet width used by SidebarProvider | ||
--vueda-sidebar-active-rail | 2px | active-item rail width for SidebarMenuButtonChild.root and SidebarMenuSubButton.root |
Tokens
--vueda-sidebar-width
| Field | Value |
|---|---|
| Light | 14rem |
| Source | client/lib/theme/vueda-tailwind/base.css:644 |
expanded desktop sidebar width.
--vueda-sidebar-width-icon
| Field | Value |
|---|---|
| Light | 3rem |
| Source | client/lib/theme/vueda-tailwind/base.css:645 |
collapsed desktop icon rail width.
--vueda-sidebar-width-mobile
| Field | Value |
|---|---|
| Light | 18rem |
| Source | client/lib/theme/vueda-tailwind/base.css:646 |
mobile sheet width used by SidebarProvider
--vueda-sidebar-active-rail
| Field | Value |
|---|---|
| Light | 2px |
| Source | client/lib/theme/vueda-tailwind/base.css:647 |
active-item rail width for SidebarMenuButtonChild.root and SidebarMenuSubButton.root