Overlays · Application UI
Sidebar
Collapsible application sidebar with provider, mobile sheet fallback, icon/offcanvas modes, menu groups, and ⌘/Ctrl+B shortcut.
@byronwade/foundation@byronwade/utils@byronwade/use-mobile@byronwade/button@byronwade/input@byronwade/separator@byronwade/sheet@byronwade/skeleton@byronwade/tooltip@base-ui/reactclass-variance-authority@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Variants, Menu Buttons, Trading Desk.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "sidebar" | "floating" | "inset" | "sidebar" | Sidebar chrome: flush edge, floating card, or inset with padded main. |
| collapsible | "offcanvas" | "icon" | "none" | "offcanvas" | Collapse behavior: slide off-screen, shrink to icons, or stay fixed width. |
| side | "left" | "right" | "left" | Which edge the sidebar anchors to. |
| contained | boolean | false | SidebarProvider: pin layout to the provider box instead of the viewport (docs previews, panels). |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/use-mobile | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/input | registry | Installed through the byronwade/ui registry. |
| @byronwade/separator | registry | Installed through the byronwade/ui registry. |
| @byronwade/sheet | registry | Installed through the byronwade/ui registry. |
| @byronwade/skeleton | registry | Installed through the byronwade/ui registry. |
| @byronwade/tooltip | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
| class-variance-authority | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/sidebar.tsx |
| Default example | content/examples/sidebar/default.tsx |
| Variants example | content/examples/sidebar/variants.tsx |
| Menu Buttons example | content/examples/sidebar/menu-buttons.tsx |
| Trading Desk example | content/examples/sidebar/trading-desk.tsx |