Sidebar

—

Edge the sidebar docks to.

Shell style: standard, floating (inset card), or inset (offset content).

Collapse behavior: slide off-canvas, shrink to icon rail, or never collapse.

Show a drag handle on the sidebar's inner edge to resize its expanded width (desktop only). Width is clamped, cookie-persisted, and dragging past the collapse threshold magnetically snaps to collapsed.

—

—

—

—

—

—

—

Size token; icon-* variants produce a square icon-only button. Also accepts a responsive object keyed by viewport breakpoints and/or @-prefixed container queries — e.g. { base: "sm", md: "base", "@sm": "lg" }.

Merge props and styling onto the single child element via Slot.

Show a spinner and disable interaction.

—

Label shown in place of children while loading.

—

Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.

—

Extra classes for the leading icon.

—

Trailing icon (Lucide or SVG component) rendered at the end.

—

Extra classes for the trailing icon.

—

CSS colour for a status dot; empty/undefined renders no dot.

Dot position relative to content.

Icon-only at rest; expands on hover/focus-visible to reveal the label to the right of the icon. Collapsed geometry equals the matching icon-* size, expanded equals the text button of that size — so pass a text size (sm/base/lg) OR its icon twin (icon-sm …); both resolve identically. Requires both icon and children; ignored with asChild or square. The label stays in the DOM in both states (stable accessible name).

—

Force the focus ring on — for documentation/testing only.

—

Force the hover state on — for documentation/testing only.

—

—

Show the action button even when sidebar is collapsed

—

—

—

Field size — a single token or a per-breakpoint object like { base: "sm", md: "lg" }.

—

Force error styling; overrides invalid state inherited from an ancestor Field.

—

Force focus ring display (for documentation/testing)

—

Right padding when sidepanel or other overlay is open

—

Render the child element as the button (Radix Slot).

Reveal only on row hover/focus (or when open) instead of always.

—

Render the child element as the button (Radix Slot), e.g. wrapping a <Link>.

—

Marks the row as the current/selected item (sets data-active).

—

Tooltip content shown only when the sidebar is collapsed; also becomes the collapsed aria-label.

—

Control tooltip visibility. Use false to hide tooltip (e.g., when a dropdown is open).

—

—

—

—

Icon to show when sidebar is collapsed (overrides icon)

—

Custom content to show when sidebar is collapsed (e.g., Avatar). Takes precedence over collapsedIcon.

—

—

Keep label/suffix visible even when the sidebar provider is collapsed.

—

—

Delay (seconds) before the expand/collapse fade, for staggering labels.

Also render a leading icon placeholder.

—

Index for deterministic width (prevents SSR hydration mismatch)

—

Keyboard shortcut keys to display (e.g., ["⌘", "C"]). Ignored if suffixIcon is provided.

—

Text label for the menu item. Use icon prop for icons, not children. When using asChild, pass a single React element.

—

Render as child element using Slot

—

—

—

—

—

—

Show loading spinner in place of icon

—

Whether the item is in an active/selected state

—

Indicator element for checkbox/radio items (absolutely positioned on left). Automatically enables inset.

—

Checked state. Renders the selectionMode indicator inline. When undefined, no indicator renders.

—

Icon to display at the end (e.g., checkmark, chevron). Takes precedence over kbd.

—

Avatar element to display at the start (takes precedence over icon and dot)

—

Content to display at the end after suffixIcon/kbd (e.g., custom content)

—

Visual indicator for active state. "dot" shows grey dot normally, green when active. "check" shows green checkmark only when active.

—

Additional className for the icon

—

Selection visual: "checkbox" renders Checkbox, "radio" renders radio circle. Defaults to "checkbox" when checked is set.

—

Tone for kbd elements. Options: "neutral" (default), "brand", "danger".

—

Emphasis for kbd elements. Options: "solid" (default), "soft", "outline", "ghost".

—

Dot indicator in the left column (takes precedence over icon): true for a neutral dot, or a {@link Tone} to tint it.

—

Icon to display in the left icon column

Add a bottom gradient fade hinting at scrollable overflow.

Cap the height: unconstrained, or clamped to the shared dropdown max.

Initial open state when uncontrolled.

Initial expanded width in px, typically read from the width cookie server-side so the resized width is applied before paint (no flash).

—

Controlled open state — pair with onOpenChange.

—

Called with the next open state on toggle; required for controlled use.

Visual weight of the separator line.

—

Whether to show the border line. Defaults to true.

Merge props and styling onto the single child element via Slot.

—

—

Size token; icon-* variants produce a square icon-only button. Also accepts a responsive object keyed by viewport breakpoints and/or @-prefixed container queries — e.g. { base: "sm", md: "base", "@sm": "lg" }.

—

CSS colour for a status dot; empty/undefined renders no dot.

Show a spinner and disable interaction.

—

—

—

—

—

—

—

Trailing icon (Lucide or SVG component) rendered at the end.

—

Label shown in place of children while loading.

—

Extra classes for the leading icon.

—

Extra classes for the trailing icon.

Dot position relative to content.

Icon-only at rest; expands on hover/focus-visible to reveal the label to the right of the icon. Collapsed geometry equals the matching icon-* size, expanded equals the text button of that size — so pass a text size (sm/base/lg) OR its icon twin (icon-sm …); both resolve identically. Requires both icon and children; ignored with asChild or square. The label stays in the DOM in both states (stable accessible name).

—

Force the focus ring on — for documentation/testing only.

—

Force the hover state on — for documentation/testing only.

—

Icon to display. Defaults to PanelLeftCloseIcon.