SidebarProvider is too heavy-handed

[jkinley]

Overall, the shadcn sidebar is a good component. well, at least until you start to make more complex layouts. recently I have realized that SidebarProvider is trying to do too much. It is controlling layout when it should just be handling context. This makes it difficult to incorporate into other page-level layouyts. Want to have a site-wide header above the Sidebar? Nope.

I was just wondering if other people have been running into the same issue and what you didi to alleviate. I did not want to have to bail on the shad sidebar, but more and more it looks like I am going to have to stop using it. It's just far too complex and tries to do everything for every site. It's using flex, which is not great bc page-level layouts are best handled by grid.

Has anyone else has some success wrangling the sidebar under control or have you bailed and just started rolling your own?

[jkinley]

used V0 to slim down the sidebar. IMO, this is far more useful for devs that are using shad to build a custom registry for their company. We don't need so many options crammed into one monolithic component. Instead of the mega- component pattern why not just have a few styles of sidebar? A company does not want each dev working on a project to make a unique sidebar. The goal is to be consistent. FYI: This is just a start and has not really been tested.

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { PanelLeftIcon } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"

/* -------------------------------------------------------------------------- *
 * Slimmed-down shadcn sidebar.
 *
 * Kept: the full shadcn look, icon-collapse (`collapsible="icon"`), the Sheet
 * drawer on mobile, the composable menu primitives, cookie persistence, the
 * rail, sub-menus, the Cmd/Ctrl+B keyboard shortcut, badges, actions, and
 * skeletons. Everything that is layout-neutral is preserved.
 *
 * Removed vs. upstream (ONLY the layout/positioning options that fight a custom
 * layout): the `variant` floating/inset modes and the `side` (right) option.
 *
 * Most importantly: SidebarProvider is now PURE CONTEXT. It renders no layout
 * wrapper and sets no width vars — the page owns layout, and the Sidebar owns
 * its own width vars. Place <Sidebar /> in any grid/flex cell you like; the
 * provider just needs to sit above it in the tree.
 * -------------------------------------------------------------------------- */

const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"

// Cookie persistence: remember the expanded/collapsed state across reloads.
const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days

// Keyboard shortcut: Cmd/Ctrl+B toggles the sidebar (accessibility / power users).
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContextProps = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean | ((open: boolean) => boolean)) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }
  return context
}

// The provider does ONE job: hold sidebar state and expose it via context.
// No layout wrapper, no width vars — it never positions anything.
function SidebarProvider({
  defaultOpen = true,
  children,
}: {
  defaultOpen?: boolean
  children: React.ReactNode
}) {
  const isMobile = useIsMobile()
  const [open, _setOpen] = React.useState(defaultOpen)
  const [openMobile, setOpenMobile] = React.useState(false)

  // On mount, restore the persisted expanded/collapsed state from the cookie.
  // Done in an effect (not the initial state) to avoid SSR hydration mismatch.
  React.useEffect(() => {
    const match = document.cookie.match(
      new RegExp(`(?:^|; )${SIDEBAR_COOKIE_NAME}=([^;]*)`)
    )
    if (match) _setOpen(match[1] === "true")
  }, [])

  // Persist every change back to the cookie so the state survives reloads.
  const setOpen = React.useCallback(
    (value: boolean | ((open: boolean) => boolean)) => {
      _setOpen((prev) => {
        const next = typeof value === "function" ? value(prev) : value
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
        return next
      })
    },
    []
  )

  // When the viewport grows back to desktop, dismiss any open mobile drawer so
  // a stale `openMobile` can't pop the drawer open on the next resize down.
  React.useEffect(() => {
    if (!isMobile) setOpenMobile(false)
  }, [isMobile])

  // Toggle whichever surface matches the current viewport.
  const toggleSidebar = React.useCallback(() => {
    return isMobile
      ? setOpenMobile((value) => !value)
      : setOpen((value) => !value)
  }, [isMobile, setOpen])

  // Cmd/Ctrl+B toggles the sidebar from anywhere — keyboard accessibility.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }
    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [toggleSidebar])

  const state = open ? "expanded" : "collapsed"

  const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, isMobile, openMobile, toggleSidebar]
  )

  return (
    <SidebarContext.Provider value={contextValue}>
      {children}
    </SidebarContext.Provider>
  )
}

function Sidebar({
  collapsible = "icon",
  className,
  children,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  collapsible?: "icon" | "none"
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

  // Width vars live on the Sidebar itself, so it stands alone in any layout.
  const widthStyle = {
    "--sidebar-width": SIDEBAR_WIDTH,
    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
    ...style,
  } as React.CSSProperties

  // Mobile: render as a Sheet drawer.
  if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          side="left"
          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
          style={
            { "--sidebar-width": SIDEBAR_WIDTH_MOBILE } as React.CSSProperties
          }
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

  // Desktop: a self-contained column. The `group` + data attributes drive the
  // icon-collapse styling on descendants (labels hide, buttons center).
  return (
    <div
      data-slot="sidebar"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      style={widthStyle}
      className={cn(
        "group/sidebar relative hidden h-full flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear md:flex",
        "w-(--sidebar-width)",
        // Icon mode shrinks to a slim rail instead of disappearing.
        "data-[collapsible=icon]:w-(--sidebar-width-icon)",
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon-sm"
      className={cn(className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

// The rail: a thin clickable strip on the sidebar's inner edge. Click anywhere
// along it to toggle — a quick affordance separate from the trigger button.
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
  const { toggleSidebar } = useSidebar()

  return (
    <button
      type="button"
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 right-0 z-20 hidden w-4 cursor-w-resize transition-all ease-linear md:flex",
        "after:absolute after:inset-y-0 after:right-0 after:w-[2px] hover:after:bg-sidebar-border",
        "group-data-[collapsible=icon]/sidebar:cursor-e-resize",
        className
      )}
      {...props}
    />
  )
}

// Optional convenience wrapper for the main content area. It does not depend on
// the sidebar's width — layout is the page's job — it just provides nice base
// styles for the content column when you want them.
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        "relative flex min-h-svh w-full flex-1 flex-col bg-background",
        className
      )}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar:overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  render,
  ...props
}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
  return useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(
      {
        className: cn(
          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:size-4 [&>svg]:shrink-0",
          // Fade the group label out as the rail collapses.
          "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0",
          className
        ),
      },
      props
    ),
    render,
    state: { slot: "sidebar-group-label", sidebar: "group-label" },
  })
}

function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn("group/menu-item relative", className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]/sidebar:size-8! group-data-[collapsible=icon]/sidebar:p-2! [&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate",
  {
    variants: {
      size: {
        default: "h-8 text-sm",
        lg: "h-12 text-sm",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
)

function SidebarMenuButton({
  render,
  isActive = false,
  size = "default",
  className,
  ...props
}: useRender.ComponentProps<"button"> &
  React.ComponentProps<"button"> & {
    isActive?: boolean
  } & VariantProps<typeof sidebarMenuButtonVariants>) {
  return useRender({
    defaultTagName: "button",
    props: mergeProps<"button">(
      {
        className: cn(sidebarMenuButtonVariants({ size }), className),
      },
      props
    ),
    render,
    state: {
      slot: "sidebar-menu-button",
      sidebar: "menu-button",
      size,
      active: isActive,
    },
  })
}

// A secondary action button layered on a menu item (e.g. a "⋯" or "+" button),
// separate from the item's main link. Optionally only shows on hover.
function SidebarMenuAction({
  className,
  showOnHover = false,
  render,
  ...props
}: useRender.ComponentProps<"button"> &
  React.ComponentProps<"button"> & {
    showOnHover?: boolean
  }) {
  return useRender({
    defaultTagName: "button",
    props: mergeProps<"button">(
      {
        className: cn(
          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
          // Hide entirely while collapsed to the icon rail.
          "group-data-[collapsible=icon]/sidebar:hidden",
          showOnHover &&
            "peer-data-active/menu-button:text-sidebar-accent-foreground opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
          className
        ),
      },
      props
    ),
    render,
    state: { slot: "sidebar-menu-action", sidebar: "menu-action" },
  })
}

// A small count/status pill on the right edge of a menu item (e.g. "Inbox 12").
function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none",
        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground",
        "top-1.5",
        "group-data-[collapsible=icon]/sidebar:hidden",
        className
      )}
      {...props}
    />
  )
}

// A loading placeholder shaped like a menu item. Render a few while async nav
// data (teams, projects, etc.) is loading so items don't pop in.
function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean
}) {
  // Random width keeps the placeholder rows from looking uniform.
  const width = React.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, [])

  return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={{ "--skeleton-width": width } as React.CSSProperties}
      />
    </div>
  )
}

// Sub-menus: nested, indented nav under a parent item (e.g. Settings → Billing).
// Hidden entirely while the sidebar is collapsed to the icon rail.
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
        "group-data-[collapsible=icon]/sidebar:hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn("group/menu-sub-item relative", className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  render,
  size = "md",
  isActive = false,
  className,
  ...props
}: useRender.ComponentProps<"a"> &
  React.ComponentProps<"a"> & {
    size?: "sm" | "md"
    isActive?: boolean
  }) {
  return useRender({
    defaultTagName: "a",
    props: mergeProps<"a">(
      {
        className: cn(
          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate",
          size === "sm" && "text-xs",
          size === "md" && "text-sm",
          "group-data-[collapsible=icon]/sidebar:hidden",
          className
        ),
      },
      props
    ),
    render,
    state: {
      slot: "sidebar-menu-sub-button",
      sidebar: "menu-sub-button",
      size,
      active: isActive,
    },
  })
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  useSidebar,
}

[shashank-sn]

You're not alone — this is a common frustration. The SidebarProvider trying to do layout + context simultaneously is the core issue. Here are a few approaches teams have used:

1. Extract context, discard layout (the surgical approach)

Pull only the context logic out of SidebarProvider into your own provider, keeping the cookie persistence, keyboard shortcut, mobile detection, and state toggling. Then build your own layout wrapper that fits your page grid. You'd keep all the SidebarMenu*, SidebarGroup*, and Sidebar* presentational components as-is — they just consume useSidebar() from your provider instead of the bundled one.

2. CSS grid override via data attributes

If you don't want to fork the component, use a wrapping container to coerce the sidebar into your grid layout:

[data-slot="sidebar"] {
  position: relative !important;
  width: var(--sidebar-width) !important;
}

Fragile on update, but quick.

3. Roll a minimal sidebar from scratch (honestly, not that bad)

The sidebar is ~90% state management (mobile detection, cookie, toggle, keyboard shortcut) and ~10% layout. A minimal version is ~100 lines:

• Provider with the 5 pieces of state
• A <aside> that reads useSidebar() and wraps your nav
• Mobile fallback using shadcn's Sheet (already piped through from the original)

The SidebarMenu* components are the most tedious to replicate, but if you're building a design system for your company, writing them once with just the structure you need is less maintenance than fighting the monolithic version on every update.

Most projects in production I've seen end up at option 1 or 3 — keeping the context behavior and replacing the layout shell. The provider is doing the right thing internally (cookie, keyboard, mobile detection, state), it just shouldn't be deciding your page layout.

[poetryofcode]

Clean solution: separate the context from the layout entirely, let your CSS grid own the DOM.

[UnknownHawkins]

We could suggest using composition: render SidebarProvider as a wrapper only for context, and handle layout outside with grid, maybe using a custom wrapper component that provides context but doesn't enforce layout. Or suggest using the primitive Sidebar component from Radix UI and building your own layout. Just give suggestion. So start with "Consider" or "One way". Also avoid rhetorical questions ending with "?" mid-explanation

[MILLERMARRU]

Your read on it is right, SidebarProvider is doing two jobs: it owns the context (state, cookie persistence, keyboard shortcut, mobile detection) and it renders a flex wrapper that assumes it owns the whole viewport. But since shadcn components live in your repo, you do not have to bail, you can split those two jobs yourself.

For the specific case of a site-wide header above the sidebar, the technique that works with the stock component is offsetting with a CSS variable instead of fighting the flex wrapper:

<div className="[--header-height:3.5rem]">
  <SiteHeader className="fixed inset-x-0 top-0 z-50 h-(--header-height)" />
  <SidebarProvider className="!min-h-[calc(100svh-var(--header-height))]">
    <AppSidebar className="top-(--header-height) h-[calc(100svh-var(--header-height))]" />
    <SidebarInset>{children}</SidebarInset>
  </SidebarProvider>
</div>

The official blocks gallery has a variant built exactly this way (the "sidebar with a site header" block), so it is a supported shape, just not the default.

If you want grid to own the page layout, the cleaner surgery is to open sidebar.tsx and split SidebarProvider into two pieces: keep the context provider (everything up to and including the SidebarContext.Provider and the TooltipProvider) and delete the wrapper div with the flex classes, then let your own grid template place the Sidebar and the content. The parts that actually need to stay together are the context value and the CSS variables (--sidebar-width, --sidebar-width-icon), which you can move onto your grid container. Everything else in that wrapper is presentation you are allowed to own.

That is also my honest take on the philosophy question: the mega-component exists so the default copy works for the 80 percent case, but the whole point of the copy-in model is that layout opinions are yours to remove. For a company registry your instinct is right, publish a slimmed provider plus two or three fixed sidebar recipes instead of the full option matrix.