Sidebar

A composable, responsive sidebar component built on top of Radix UI and standard Drawer sliding logic.

A composable, responsive sidebar component built on top of Radix UI and standard Drawer sliding logic.

Preview

pnpm dlx vibe-ui-kit@latest add sidebar

Prop	Type	Default	Description
side	"left" \| "right"	"left"	The side of the screen the sidebar should appear on.
variant	"sidebar" \| "floating" \| "inset"	"sidebar"	The visual variant of the sidebar layout.
collapsible	"offcanvas" \| "icon" \| "none"	"offcanvas"	How the sidebar should collapse when the trigger is toggled.

Active Theme Style

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme { --radius: 0.5rem; --glass-blur: 8px; }

Changes apply instantly to this documentation workspace.

Sidebar | Vibe UI