shadcn-ui/ui · error · Error

useSidebar must be used within a SidebarProvider.

Error message

useSidebar must be used within a SidebarProvider.

What it means

useSidebar reads SidebarContext, populated only by <SidebarProvider> (open state, setters, mobile state, toggleSidebar). Sidebar, SidebarTrigger, SidebarMenuButton (collapsible), and SidebarInset all consume it; calling any of them without a SidebarProvider ancestor leaves context null, so the hook throws rather than hand back undefined open/toggle behavior.

Source

Thrown at apps/v4/registry/bases/radix/ui/sidebar.tsx:49

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 layout (typically at the root or route layout) in <SidebarProvider>.
Ensure <SidebarProvider> wraps both <Sidebar> and <SidebarInset> siblings.
Move portal/modal sidebar content back under the provider or add a second provider.

Example fix

// before
<div>
  <Sidebar />
  <SidebarTrigger />
</div>

// after
<SidebarProvider>
  <Sidebar />
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

Defensive patterns

Strategy: validation

Validate before calling

function useOptionalSidebar() {
  return React.useContext(SidebarContext)
}
const sidebar = useOptionalSidebar()
if (!sidebar) return null

Type guard

function useHasSidebarProvider(): boolean {
  return React.useContext(SidebarContext) !== null
}

Prevention

Place <SidebarProvider> high in the route/layout so all sidebar consumers are descendants.
Wrap both <Sidebar> and <SidebarInset> with the same provider.
Render portal/modal sidebar content within the provider subtree or wrap it in its own provider.
Smoke-test <SidebarTrigger> inside <SidebarProvider>.

When it happens

Trigger: Rendering <Sidebar>, <SidebarTrigger>, or <SidebarInset> outside of <SidebarProvider>; placing SidebarProvider inside a layout that the route does not use; mounting a sidebar in a modal/portal that is outside the provider subtree.

Common situations: Layout refactor that moves SidebarProvider to a subset of routes; copy-pasting <SidebarTrigger> into a header that lives above the provider; portal-based menus rendered outside the provider.

Related errors

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