{"record":{"id":"00069dcdc439dc60","repo":"shadcn-ui/ui","slug":"usesidebar-must-be-used-within-a-sidebarprovider-00069d","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/new-york-v4/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/new-york-v4/ui/sidebar.tsx#L32-L68","documentation":"Same guard as the bases/radix sidebar: useSidebar reads SidebarContext, populated only by <SidebarProvider>. This is the new-york-v4 legacy copy; any sidebar sub-component rendered outside <SidebarProvider> throws.","triggerScenarios":"Rendering new-york-v4 <Sidebar>, <SidebarTrigger>, or <SidebarInset> outside of <SidebarProvider>; portal/modal sidebar content outside the provider subtree.","commonSituations":"Layout refactor moving SidebarProvider off a route; copy-pasting SidebarTrigger into a header above the provider.","solutions":["Wrap the layout in <SidebarProvider>.","Ensure <SidebarProvider> wraps both <Sidebar> and <SidebarInset>.","Move portal sidebar content back under the provider."],"exampleFix":"// before\n<div>\n  <Sidebar />\n</div>\n\n// after\n<SidebarProvider>\n  <Sidebar />\n  <SidebarInset />\n</SidebarProvider>","handlingStrategy":"validation","validationCode":"function useOptionalSidebar() {\n  return React.useContext(SidebarContext)\n}\nconst sidebar = useOptionalSidebar()\nif (!sidebar) return null","typeGuard":"function useHasSidebarProvider(): boolean {\n  return React.useContext(SidebarContext) !== null\n}","tryCatchPattern":null,"preventionTips":["Wrap the layout containing new-york-v4 sidebar pieces in <SidebarProvider>.","Keep <Sidebar> and <SidebarInset> under the same provider.","Render portal sidebar content within the provider subtree."],"tags":["react","context","sidebar","new-york-v4"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}