How do I install the Vibe UI Sidebar component?

You can install Sidebar into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add sidebar" in your terminal.

Does Vibe UI Sidebar support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Sidebar component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Sidebar

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

Sidebar

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

Preview

Installation

pnpm dlx vibe-ui-kit@latest add sidebar button input separator drawer skeleton tooltip

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button, input, separator, drawer, skeleton, tooltip

Props

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.

PreviousSelect

Next Skeleton

Contributors

Jenish Sabhadiya

Sidebar

Sidebar

Preview

Installation

Props

Sidebar

Contributors

Theme Customizer