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

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

# SidebarHeader

**Type**: component

Header section container for sidebar content A flexible container for sidebar header content such as logos, application titles, user information, or action buttons. The header remains visible even when the sidebar is collapsed to icon mode, making it ideal for persistent branding or key actions.

## JSX Usage

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

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

## Component Props

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

## Examples

### Example 1
```tsx
// Simple header with title
<SidebarHeader>
  <h2 className="text-lg font-semibold">My Application</h2>
</SidebarHeader>
```
### Example 2
```tsx
// Header with trigger and search
<SidebarHeader>
  <div className="flex items-center justify-between">
    <h2>Navigation</h2>
    <SidebarTrigger />
  </div>
  <SidebarInput placeholder="Search..." className="mt-2" />
</SidebarHeader>
```
### Example 3
```tsx
// Header with user menu
<SidebarHeader>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <SidebarMenuButton>
            <Avatar />
            <span>John Doe</span>
            <ChevronDown className="ml-auto" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Settings</DropdownMenuItem>
          <DropdownMenuItem>Logout</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</SidebarHeader>
```