shadcn-syntax-sidebar

name	shadcn-syntax-sidebar
description	Use when building an application shell, dashboard navigation, admin sidebar, collapsible side navigation, or any persistent vertical navigation rail in shadcn ui. Prevents the common mistakes of rendering Sidebar outside a SidebarProvider (throws "useSidebar must be used within a SidebarProvider"), omitting the 'use client' directive on the layout that hosts the Provider, choosing the wrong collapsible variant for desktop versus mobile, placing SidebarInset without a sibling Sidebar (layout collapse), and skipping the cookie-based persistence handshake in server-rendered frameworks. Covers all 23 exported primitives (SidebarProvider, Sidebar, SidebarTrigger, SidebarRail, SidebarInset, SidebarInput, SidebarHeader, SidebarFooter, SidebarSeparator, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton) plus the useSidebar hook, the three collapsible variants (offcanvas, icon, none), the three layout variants (sidebar, floating, inset), left and right sides, mobile sheet a11y handling, cookie persistence under the name sidebar_state, the Cmd or Ctrl plus B keyboard shortcut, and the block system (sidebar-01 through sidebar-16) as a ready-made copy source. Keywords: shadcn sidebar, SidebarProvider, SidebarTrigger, SidebarMenu, SidebarMenuButton, SidebarInset, SidebarRail, useSidebar, collapsible sidebar, sidebar offcanvas, sidebar icon, icon sidebar, sidebar mobile, dashboard sidebar, app shell, application shell sidebar, admin sidebar, sidebar persistence, sidebar cookie, sidebar_state cookie, sidebar keyboard shortcut, cmd b sidebar, ctrl b sidebar, sidebar-01 block, sidebar-02 block, sidebar block, sidebar variant inset, sidebar variant floating, sidebar side right, how do I make a sidebar, how do I add a collapsible sidebar, useSidebar must be used within a SidebarProvider, sidebar context error, sidebar not collapsing, sidebar not showing on mobile, sidebar layout collapse, persistent sidebar state.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

shadcn-syntax-sidebar

Sidebar is the largest single component in the shadcn catalog: 23 exported primitives, one context hook, three collapsible behaviors, three layout variants, two sides, separate desktop and mobile rendering paths, and built-in cookie-based state persistence. It is intended as the foundation for the "application shell" pattern (sidebar + topbar + main content area) and is the shared substrate for every block named sidebar-01 through sidebar-16 in the shadcn block registry.

The component lives in a single client file (components/ui/sidebar.tsx) and internally composes Sheet (mobile drawer), Tooltip (icon-collapsed labels), Input, Skeleton, and Button. Because the file begins with "use client" and exports a React context, ALWAYS treat every consumer of Sidebar primitives as a client subtree.

Quick Reference

Install:

pnpm dlx shadcn@latest add sidebar

This also installs sheet, tooltip, input, skeleton, button, separator, and the use-mobile hook as transitive dependencies.

Minimal application shell (Next.js app router layout, server component file that imports a client provider wrapper):

// app/layout.tsx (server component)
import { cookies } from "next/headers"
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

export default async function Layout({ children }: { children: React.ReactNode }) {
  const cookieStore = await cookies()
  const defaultOpen = cookieStore.get("sidebar_state")?.value === 

   (
    
  )
}