shadcn Sidebar: install, configure, and make it resizable.

Step 1 — Prerequisites

You need an existing Next.js (or Vite/Remix) project with shadcn/ui and Tailwind CSS already configured. If you haven't initialised shadcn yet:

npx shadcn@latest init

Step 2 — Add the Sidebar

Run the add command. shadcn detects your framework and copies the component files into components/ui/sidebar.tsx.

npx shadcn@latest add sidebar

This installs SidebarProvider, Sidebar, SidebarTrigger, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, and all related sub-components. It also installs the Sheet, Separator, and Tooltip dependencies if not already present.

Add all shadcn components at once

If you want to install every available shadcn component in one shot (useful for new boilerplate projects):

npx shadcn@latest add --all

This installs all ~50 components: accordion, alert, avatar, badge, button, calendar, card, carousel, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, form, hover-card, input, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip, and more.

What happens on mobile

Programmatically controlling the sidebar on mobile

"use client";

import { useSidebar } from "@/components/ui/sidebar";

export function MobileMenuButton() {
  const { toggleSidebar, isMobile } = useSidebar();

  if (!isMobile) return null; // only render on mobile

  return (
    <button onClick={toggleSidebar} className="p-2">
      Open menu
    </button>
  );
}

How do I add the shadcn Sidebar component?

Run npx shadcn@latest add sidebar. This installs the full Sidebar component family into components/ui/sidebar.tsx. Prerequisites: shadcn/ui init and Tailwind CSS already configured in your project.

How do I add all shadcn components at once?

Run npx shadcn@latest add --all. This installs every available component including accordion, alert, avatar, badge, button, calendar, card, carousel, collapsible, dialog, drawer, dropdown-menu, form, hover-card, input, menubar, navigation-menu, popover, progress, radio-group, resizable, select, separator, sheet, sidebar, skeleton, slider, sonner, switch, table, tabs, textarea, toggle, tooltip, and more.

How do I make the shadcn Sidebar resizable?

Install the Resizable component (npx shadcn@latest add resizable), then wrap your layout in a ResizablePanelGroup. Put the Sidebar inside a ResizablePanel with minSize/maxSize constraints. Add autoSaveId="sidebar-layout" to ResizablePanelGroup to persist the width across sessions.

The sidebar doesn't show on mobile — how do I fix it?

The shadcn Sidebar automatically switches to a Sheet overlay on mobile. Make sure SidebarProvider is at a high level in your layout (root layout.tsx is recommended). Then add a SidebarTrigger button in your header to open/close the Sheet. The trigger can be hidden on desktop with className='md:hidden' if needed.

How do I highlight the active nav item in shadcn Sidebar?

Use the isActive prop on SidebarMenuButton. In Next.js, get the current path with usePathname() from next/navigation, then compare: isActive={pathname === item.url}. This adds the active state styling (background highlight) automatically.

Does the shadcn Sidebar work with Next.js Server Components?

The Sidebar component itself needs to be a Client Component ("use client") because it uses React context (useSidebar hook). However, SidebarProvider can be used in a Server Component layout — just mark it as a client component boundary. Your page content stays a Server Component since it's inside SidebarProvider, not the Sidebar itself.