@neynar/ui/llm-docs/sidebar-provider.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# SidebarProvider

**Type**: component

Context provider for comprehensive sidebar state management The SidebarProvider is the foundational component that manages all sidebar behavior including state persistence, responsive design, keyboard shortcuts, and mobile handling. It provides context to all sidebar-related components and should wrap your entire application or the section containing the sidebar.

## JSX Usage

```jsx
import { SidebarProvider } from '@neynar/ui';

<SidebarProvider
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
>
  {/* Your content here */}
</SidebarProvider>
```

## Component Props

### defaultOpen
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Child components

## Examples

### Example 1
```tsx
// Basic uncontrolled usage
<SidebarProvider>
  <Sidebar />
  <SidebarInset>
    <main>Your content</main>
  </SidebarInset>
</SidebarProvider>
```
### Example 2
```tsx
// Controlled usage with custom state
function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  return (
    <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen}>
      <Sidebar />
      <SidebarInset>Content</SidebarInset>
    </SidebarProvider>
  )
}
```
### Example 3
```tsx
// Custom width with CSS variables
<SidebarProvider
  style={{
    "--sidebar-width": "20rem",
    "--sidebar-width-mobile": "18rem"
  }}
>
  <Sidebar />
</SidebarProvider>
```