{"record":{"id":"992eece2a9caf8b4","repo":"shadcn-ui/ui","slug":"usesidebar-must-be-used-within-a-sidebarprovider-992eec","errorCode":null,"errorMessage":"useSidebar must be used within a SidebarProvider.","messagePattern":"useSidebar must be used within a SidebarProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"apps/v4/registry/bases/base/ui/sidebar.tsx","lineNumber":50,"sourceCode":"const SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {","sourceCodeStart":32,"sourceCodeEnd":68,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/apps/v4/registry/bases/base/ui/sidebar.tsx#L32-L68","documentation":"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.","triggerScenarios":"Mounting `<SidebarTrigger />`, `<Sidebar />`, or `<SidebarInset />` outside `<SidebarProvider>` when importing from the `base` style — typically a header trigger placed above the provider.","commonSituations":"App-shell reorganization with the `base` style; cross-segment sidebar markup without a shared provider; tests of individual parts.","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>`."],"exampleFix":"// before\n<header>\n  <SidebarTrigger />\n</header>\n<SidebarProvider>\n  <Sidebar />\n</SidebarProvider>\n\n// after\n<SidebarProvider>\n  <header>\n    <SidebarTrigger />\n  </header>\n  <Sidebar />\n</SidebarProvider>","handlingStrategy":"type-guard","validationCode":"render(<SidebarProvider><header><SidebarTrigger/></header><Sidebar/></SidebarProvider>) // base style imports","typeGuard":"import React from \"react\"\nimport { SidebarContext } from \"@/registry/bases/base/ui/sidebar\"\nconst insideSidebar = () => React.useContext(SidebarContext) != null","tryCatchPattern":"try { useSidebar() } catch (e) { if (e.message.includes(\"SidebarProvider.\")) {/*wrap shell in SidebarProvider*/} throw e }","preventionTips":["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."],"tags":["react","context","hooks","shadcn","sidebar","base-style"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}