Sidebar

Builds a responsive application sidebar with collapsible navigation.

Installation

Install Sidebar from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/sidebar

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
} from "@/components/ui/sidebar"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Sidebar	The root component that owns the primary structure and state.
SidebarContent	Contains the primary visible content.
SidebarFooter	Groups supporting actions or metadata.
SidebarGroup	Groups related items into one logical set.
SidebarGroupAction	Provides an action associated with the component.
SidebarGroupContent	Contains the primary visible content.
SidebarGroupLabel	Provides a visible label for its related control or value.
SidebarHeader	Groups heading and introductory content.
SidebarInput	Captures or exposes the current value.
SidebarInset	A composable part of the component anatomy.
SidebarMenu	A composable part of the component anatomy.
SidebarMenuAction	Provides an action associated with the component.
SidebarMenuBadge	A composable part of the component anatomy.
SidebarMenuButton	A composable part of the component anatomy.
SidebarMenuItem	Represents one option or repeated child.
SidebarMenuSkeleton	A composable part of the component anatomy.
SidebarMenuSub	A composable part of the component anatomy.
SidebarMenuSubButton	A composable part of the component anatomy.
SidebarMenuSubItem	Represents one option or repeated child.
SidebarProvider	Provides shared state and behavior to descendant parts.
SidebarRail	A composable part of the component anatomy.
SidebarSeparator	Visually and semantically separates related groups.
SidebarTrigger	Controls opening, selection, or disclosure behavior.
useSidebar	Reads or controls the component's shared state.

API Reference

Sidebar exports 24 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Sidebar Component
SidebarContent Component
SidebarFooter Component
SidebarGroup Component
SidebarGroupAction Component
SidebarGroupContent Component
SidebarGroupLabel Component
SidebarHeader Component
SidebarInput Component
SidebarInset Component
SidebarMenu Component
SidebarMenuAction Component
SidebarMenuBadge Component
SidebarMenuButton Component
SidebarMenuItem Component
SidebarMenuSkeleton Component
SidebarMenuSub Component
SidebarMenuSubButton Component
SidebarMenuSubItem Component
SidebarProvider Component
SidebarRail Component
SidebarSeparator Component
SidebarTrigger Component
useSidebar Hook

Accessibility

Preserve the native and Base UI keyboard model when composing Sidebar; do not replace semantic links or controls with click-only elements.
Use concise accessible names, expose the current item when applicable, and verify focus order at both mobile and desktop widths.

Source

Sidebar uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Sheet Skeleton