shadcn-ui/ui · error · Error

useSidebar must be used within a SidebarProvider.

Error message

useSidebar must be used within a SidebarProvider.

What it means

Identical contract to [155] but in the `base` style registry (line 50: SidebarContextProps lists setOpen/openMobile/setOpenMobile/isMobile/toggleSidebar). `useSidebar` reads `SidebarContext`; sidebar parts rendered outside `<SidebarProvider>` throw so open/keyboard state is consistent.

Source

Thrown at apps/v4/registry/bases/base/ui/sidebar.tsx:50

const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContextProps = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: 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
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {

View on GitHub (pinned to efac598707)

Solutions

Wrap the whole shell (header with SidebarTrigger + Sidebar + main) in `<SidebarProvider>` from the `base` style import path.
Keep the provider at the root layout to preserve cookie/localStorage-backed open state.
Decorate tests/stories with `<SidebarProvider>`.

Example fix

// before
<header>
  <SidebarTrigger />
</header>
<SidebarProvider>
  <Sidebar />
</SidebarProvider>

// after
<SidebarProvider>
  <header>
    <SidebarTrigger />
  </header>
  <Sidebar />
</SidebarProvider>

Defensive patterns

Strategy: type-guard

Validate before calling

render(<SidebarProvider><header><SidebarTrigger/></header><Sidebar/></SidebarProvider>) // base style imports

Type guard

import React from "react"
import { SidebarContext } from "@/registry/bases/base/ui/sidebar"
const insideSidebar = () => React.useContext(SidebarContext) != null

Try / catch

try { useSidebar() } catch (e) { if (e.message.includes("SidebarProvider.")) {/*wrap shell in SidebarProvider*/} throw e }

Prevention

Wrap the app shell in the base-style SidebarProvider at the root layout.
Keep the provider high so open state persists.
Add the base-style SidebarProvider to story/test decorators.

When it happens

Trigger: Mounting `<SidebarTrigger />`, `<Sidebar />`, or `<SidebarInset />` outside `<SidebarProvider>` when importing from the `base` style — typically a header trigger placed above the provider.

Common situations: App-shell reorganization with the `base` style; cross-segment sidebar markup without a shared provider; tests of individual parts.

Related errors

AI-assisted analysis of shadcn-ui/ui@efac598707 (2026-08-12). Data as JSON: /api/errors/992eece2a9caf8b4. Report an issue: GitHub.