Linear · Sidebar

React Sidebar: Linear-style

Part of Better Design's React component library. The collapsible, dense, keyboard-first sidebar nav pattern Linear popularized for product apps: built on the shadcn sidebar primitive, ships as a shadcn-compatible registry item.

Install

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

Lands in components/ui/sidebar.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Linear showcase

Why this sidebar

•Collapsible with keyboard shortcut: matches Linear's `[` toggle feel
•Dense item rows, 8px radius, subtle hover: Linear's signature density
•Composable: SidebarProvider, SidebarHeader, SidebarContent, SidebarMenu: wire it however the app needs
•Drops into any shadcn/ui project unchanged: npx shadcn@latest add

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>
            <SidebarMenuItem>
              <SidebarMenuButton>Issues</SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <main>{children}</main>
    </SidebarProvider>
  );
}

FAQ

What's this built on?

The shadcn/ui sidebar primitive (composition of Radix Slot + custom state). Better Design re-skins it for Linear's dense, dark, purple-accent aesthetic.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item. Install via npx shadcn@latest add: source lands in your components/ui folder.

Can I make it collapsible?

Yes: the SidebarProvider exposes open/onOpenChange. Wire your own keyboard shortcut (cmd+`/cmd+\) to toggle.

How is this different from Linear's actual sidebar?

Inspired-by, not lifted. Better Design ships the visual signature; Linear's real sidebar has product-specific data (workspaces, teams, view filters) that aren't open source.

Related component pages

Linear-style Command Palette

/components/linear-command

React Data Table

/components/data-table

Apple-style Sheet

/components/apple-sheet