@neynar/ui/llm-docs/drawer-content.llm.md

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

# DrawerContent

**Type**: component

DrawerContent - Main container for drawer content with responsive positioning The primary content container that holds all drawer elements. Automatically handles portal rendering, overlay display, and responsive positioning based on the drawer direction. Includes a drag handle for bottom drawers and responsive styling for all four directions. Supports flexible layouts with proper spacing for headers, content areas, and footers. Automatically constrains height/width based on direction and viewport size.

## JSX Usage

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

<DrawerContent
  className="value"
>
  {/* Your content here */}
</DrawerContent>
```

## Component Props

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

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic content structure
<DrawerContent>
  <DrawerHeader>
    <DrawerTitle>Title</DrawerTitle>
    <DrawerDescription>Description</DrawerDescription>
  </DrawerHeader>
  <div className="p-4">
    Main content area
  </div>
  <DrawerFooter>
    <Button>Action</Button>
  </DrawerFooter>
</DrawerContent>
```
### Example 2
```tsx
// Custom styled content
<DrawerContent className="max-w-md mx-auto">
  <div className="flex-1 overflow-y-auto p-6">
    <h2>Custom Layout</h2>
    <p>Scrollable content area</p>
  </div>
</DrawerContent>
```