Make your AI a shadcn expert

Shadcn.io is not affiliated with official shadcn/ui

Shadcn Sidebar

React sidebar for app shells and dashboard navigation. Built with TypeScript and Tailwind CSS for Next.js using Base UI — collapsible rail, mobile sheet, Cmd+B.

A sidebar is the persistent nav column in an app shell. SidebarProvider owns the open state, writes a cookie, and binds Cmd/Ctrl+B. On a phone the same tree becomes a Sheet.

Scroll to load preview...

Looking for a neobrutalism version for shadcn?

Same sidebar, thicker borders. The NeoBrutalism sidebar is the kit if you want that look.

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Acme</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuButton>Inbox</SidebarMenuButton>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter />
    <SidebarRail />
  </Sidebar>
  <main>
    <SidebarTrigger />
  </main>
</SidebarProvider>

collapsible is offcanvas (slides away), icon (a rail), or none (static). Put the provider in the layout — SidebarTrigger reads it.

Composition

SidebarHeader

SidebarMenuButton

SidebarFooter

SidebarRail

SidebarTrigger

RTL

Wrap with DirectionProvider and dir="rtl". Pass dir on Sidebar so the mobile sheet flips with the page.

Scroll to load preview...

API

Prop

Type

Prop

Type

useSidebar

Prop

Type

useSidebar throws outside SidebarProvider.

Keyboard

Key	Action
`⌘B` / `Ctrl+B`	Toggle the sidebar

Notes

The provider has to wrap

useSidebar and SidebarTrigger throw if they sit outside SidebarProvider. Put the provider in the layout, not around a single menu item.

collapsible="none" is what the preview uses. The other modes position: fixed to the viewport.

With other components

Workspace switcher

Nested nav group

Next to the trigger

Labels in icon mode

Split header and list

The trigger is one

Questions

Mobile already is this

Navigation Menu

Top header instead

File Edit View

Thumb-first panel

Drag to change width

Search the same routes

Was this page helpful?

Sign in to leave feedback.

Sheet

React sheet for settings, filters, and side panels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — slides from any edge with a focus trap.

Skeleton

React skeleton for loading placeholders on cards, tables, and forms. Built with TypeScript and Tailwind CSS for Next.js using Base UI — match the loaded layout.