@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
63 lines (54 loc) • 1.45 kB
Markdown
# SidebarContent
**Type**: component
Scrollable main content area of the sidebar The primary content container that houses navigation groups, menus, and other sidebar content. Provides automatic scrolling when content exceeds available height and handles overflow behavior when the sidebar is collapsed.
## JSX Usage
```jsx
import { SidebarContent } from '@neynar/ui';
<SidebarContent
className="value"
/>
```
## Component Props
### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available
## Examples
### Example 1
```tsx
// Basic content with navigation groups
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Main</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<Home />
<span>Dashboard</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
```
### Example 2
```tsx
// Multiple groups with separators
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
// Navigation items
</SidebarGroupContent>
</SidebarGroup>
<SidebarSeparator />
<SidebarGroup>
<SidebarGroupLabel>Projects</SidebarGroupLabel>
<SidebarGroupContent>
// Project items
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
```