---
url: "https://vueda.dev/v3/reference/theming/tokens/sidebar.md"
title: "Sidebar tokens"
---

# 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](/v3/reference/theming/keys/SidebarMenuButtonChild.md#theme-key-SidebarMenuButtonChild-root) and [SidebarMenuSubButton.root](/v3/reference/theming/keys/SidebarMenuSubButton.md#theme-key-SidebarMenuSubButton-root) |  |

## Tokens

<a id="css-token-vueda-sidebar-width"></a>

### --vueda-sidebar-width

| Field | Value |
| --- | --- |
| Light | `14rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:644` |

expanded desktop sidebar width.

<a id="css-token-vueda-sidebar-width-icon"></a>

### --vueda-sidebar-width-icon

| Field | Value |
| --- | --- |
| Light | `3rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:645` |

collapsed desktop icon rail width.

<a id="css-token-vueda-sidebar-width-mobile"></a>

### --vueda-sidebar-width-mobile

| Field | Value |
| --- | --- |
| Light | `18rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:646` |

mobile sheet width used by SidebarProvider

<a id="css-token-vueda-sidebar-active-rail"></a>

### --vueda-sidebar-active-rail

| Field | Value |
| --- | --- |
| Light | `2px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:647` |

active-item rail width for [SidebarMenuButtonChild.root](/v3/reference/theming/keys/SidebarMenuButtonChild.md#theme-key-SidebarMenuButtonChild-root) and [SidebarMenuSubButton.root](/v3/reference/theming/keys/SidebarMenuSubButton.md#theme-key-SidebarMenuSubButton-root)