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: