Sidebar
A hand-drawn navigation panel that floats inside the page with an even gap on every side.
Floating panel with collapsible groups
Sketchbook
Sketchbook
Installation
Add Sidebar with the shadcn CLI.
npx shadcn@latest add https://sketchcn.chuwii.com/r/sidebar.json
Examples
App shells, roomier gaps, and nested navigation.
App shell
Studio
Pinned
  • 4
Canvas
import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton isActive>
                    <span>Sketchbook</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <SidebarTrigger className="m-3" />
        {children}
      </SidebarInset>
    </SidebarProvider>
  );
}
Collapsible groups
Canvas
<SidebarGroup collapsible defaultOpen>
  <SidebarGroupLabel>Workspace</SidebarGroupLabel>
  <SidebarGroupContent>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton>
          <Star />
          <span>Favourites</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>
Roomier gap
Canvas
<SidebarProvider
  style={{ "--sidebar-gap": "1.5rem", "--sidebar-width": "14rem" } as React.CSSProperties}
>
  <Sidebar>{/* ... */}</Sidebar>
</SidebarProvider>
Nested pages
Canvas
<SidebarMenuItem collapsible defaultOpen>
  <SidebarMenuButton>
    <Folder />
    <span>Projects</span>
  </SidebarMenuButton>
  <SidebarMenuSub>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton href="#" isActive>
        <span>Hand-drawn icons</span>
      </SidebarMenuSubButton>
    </SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenuItem>
Collapse to icons

The icon rail is a desktop affordance. On narrow screens the sidebar opens as a sheet instead, so this preview only runs from the md breakpoint up.

<Sidebar collapsible="icon">
  <SidebarContent>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton isActive tooltip="Overview">
          <Home />
          <span>Overview</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarContent>
</Sidebar>