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

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

# SidebarInset

**Type**: component

Main content container that adapts to sidebar layout The SidebarInset component serves as the primary content area that automatically adjusts its layout and spacing based on the sidebar's state and variant. It provides proper margins, responsive behavior, and styling coordination with the sidebar.

## JSX Usage

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

<SidebarInset
  className="value"
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Standard layout with header and content
<SidebarProvider>
  <Sidebar>Sidebar content</Sidebar>
  <SidebarInset>
    <header className="flex h-16 items-center gap-2 px-4">
      <SidebarTrigger />
      <h1>Page Title</h1>
    </header>
    <main className="flex-1 p-4">
      <p>Your main content goes here</p>
    </main>
  </SidebarInset>
</SidebarProvider>
```
### Example 2
```tsx
// With inset variant coordination
<SidebarProvider>
  <Sidebar variant="inset">Sidebar</Sidebar>
  <SidebarInset>
    // Content automatically gets proper spacing
    <div>Content with proper inset margins</div>
  </SidebarInset>
</SidebarProvider>
```