useSidebar must be used within a SidebarProvider even in an absolutely minimal example #7543

atterattgdsn · 2025-06-05T11:21:03Z

atterattgdsn
Jun 5, 2025

Hello,

I just tried the Sidebar component for the first time, and I can't even get a very minimal example working in my dev environment. I just installed it as per instructions by

npx shadcn@latest add sidebar

Chrome console shows:

Uncaught Error: useSidebar must be used within a SidebarProvider.
    at useSidebar (sidebar.tsx:77:15)
    at Sidebar (sidebar.tsx:132:60)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20099:13)
    at beginWork (react-dom.development.js:21622:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27486:7)
    at performUnitOfWork (react-dom.development.js:26595:12)

And I'm using very minimal React app:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { AppSidebar } from '@/components/app-sidebar';

// Mount the sidebar component
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('sidebar-root');
    if (!container) return;

    const root = ReactDOM.createRoot(container);
    root.render(<AppSidebar />);
});

The app-sidebar being directly copypasted from the ShadCN website:

import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarHeader,
} from "@/components/ui/sidebar"

export function AppSidebar() {
    return (
        <Sidebar>
            <SidebarHeader />
            <SidebarContent>
                <SidebarGroup />
                <SidebarGroup />
            </SidebarContent>
            <SidebarFooter />
        </Sidebar>
    )
}

The webpage that loads the React app is within a .NET 8 application, quite simple as well:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navigation Sidebar</title>
    <link rel="stylesheet" href="~/css/sidebar.min.css" />
</head>
<body>
    <div id="sidebar-root" data-initial-props='@ViewData["InitialProps"]'></div>
    <script src="~/js/sidebar-components.js"></script>
</body>
</html>

Am I missing something obvious?

Answered by abhiy13

Jun 5, 2025

Hey, the AppSidebar must be wrapped inside a SidebarProvider, the provider handles the collapsible state. You can refer to this diagram for the way sidebar is structured:

Its from the sidebar documentation: https://ui.shadcn.com/docs/components/sidebar
If you scroll down below in this documentation you can see an example of AppSidebar usage:

import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider

View full answer

abhiy13 · 2025-06-05T11:35:34Z

abhiy13
Jun 5, 2025

Hey, the AppSidebar must be wrapped inside a SidebarProvider, the provider handles the collapsible state. You can refer to this diagram for the way sidebar is structured:

Its from the sidebar documentation: https://ui.shadcn.com/docs/components/sidebar
If you scroll down below in this documentation you can see an example of AppSidebar usage:

import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  )
}

Please take another look at the documentation on the shadcn website, please try to read till the end.
For understanding more on Context and Providers in react you can read this article: https://medium.com/@ankushchavan0411/getting-started-with-react-context-api-dca142757080

Hope this helps!

1 reply

atterattgdsn Jun 5, 2025
Author

Thanks for the fast response! I am still new to ShadCN, so I assumed all the components are pretty much plug and play like some of the simpler components I've tried. I got it working now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

useSidebar must be used within a SidebarProvider even in an absolutely minimal example #7543

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

useSidebar must be used within a SidebarProvider even in an absolutely minimal example #7543

Uh oh!

Uh oh!

atterattgdsn Jun 5, 2025

Replies: 1 comment · 1 reply

Uh oh!

abhiy13 Jun 5, 2025

Uh oh!

atterattgdsn Jun 5, 2025 Author

atterattgdsn
Jun 5, 2025

Replies: 1 comment 1 reply

abhiy13
Jun 5, 2025

atterattgdsn Jun 5, 2025
Author