Component · 8+ variants

React Sidebar Component

Collapsible, keyboard-friendly app-shell sidebar. Composable: SidebarProvider, SidebarHeader, SidebarContent, SidebarMenu. Pick the variant that matches your product.

Install (any variant)

npx shadcn@latest add https://better-design.com/registry/linear/sidebar.json

Replace linear with any design system slug. Every variant ships from the same registry.

Design system variants

Linear

Dense dark, purple accent: dev-tool app shell

Read full guide

Vercel

Pure black, Geist, 6px radius: infra dashboard

View design system

Supabase

Dark with green accent: DB / dev platform

View design system

Stripe

Sohne, indigo: fintech / billing admin

View design system

Notion

Light minimal, system-ui: content / docs admin

View design system

Apple

SF Pro, soft: premium consumer admin

View design system

Airbnb

Warm light, coral: marketplace admin

View design system

Linear Quality

Multi-layer shadows, engineering aesthetic

View design system

Browse all 73 design systems

Why this sidebar

•Built on shadcn/ui's sidebar primitive: Radix Slot composition
•Composable: SidebarProvider, SidebarHeader, SidebarContent, SidebarMenu: wire it however the app needs
•Collapsible with controlled state: wire your own keyboard shortcut
•73 design-system variants: Linear dense dark, Vercel pure black, Notion light minimal

Usage

import {
  SidebarProvider, Sidebar, SidebarHeader,
  SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton,
} from "@/components/ui/sidebar";

export function AppShell({ children }) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>Acme</SidebarHeader>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton>Inbox</SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <main>{children}</main>
    </SidebarProvider>
  );
}

FAQ

What's this built on?

The shadcn/ui sidebar primitive (Radix Slot + custom state). Better Design ships re-skinned variants per design system: same composition API, different aesthetic.

Is it collapsible?

Yes. SidebarProvider exposes open/onOpenChange: wire your own keyboard shortcut (cmd+`/cmd+\) to toggle, or use the built-in trigger.

Is it free?

Yes. MIT-licensed shadcn-compatible registry items. Install via `npx shadcn@latest add`.

Best variant for an admin dashboard?

Linear or Vercel for dev tools. Stripe for fintech. Supabase for DB platforms. Notion for internal ops. See the admin-dashboard template page for full guidance.

Related component pages

React Data Table

/components/data-table

React Command Palette

/components/command-palette

Linear-style Sidebar

/components/linear-sidebar