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

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

# Drawer

**Type**: component

Drawer - Mobile-optimized sliding panel component A flexible drawer component built on Vaul that creates sliding panel interfaces from screen edges. Designed primarily for mobile experiences with touch gestures, swipe-to-dismiss functionality, and natural drag interactions. Supports multiple directions (top, bottom, left, right) with snap points and responsive behavior. Built on Vaul library which provides excellent performance, accessibility, and natural touch interactions. The drawer automatically handles focus management, scroll locking, and ARIA attributes for screen readers.

## JSX Usage

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

<Drawer
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
  modal={true}
  container={value}
  direction={value}
  onAnimationEnd={handleAnimationEnd}
  dismissible={true}
  handleOnly={true}
  repositionInputs={true}
  snapPoints={[]}
  activeSnapPoint={0}
  setActiveSnapPoint={() => {}}
  fadeFromIndex={0}
  snapToSequentialPoint={true}
>
  {/* Your content here */}
</Drawer>
```

## 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

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

### container
- **Type**: `HTMLElement`
- **Required**: No
- **Description**: No description available

### direction
- **Type**: `"top" | "bottom" | "left" | "right"`
- **Required**: No
- **Description**: No description available

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

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

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

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

### snapPoints
- **Type**: `(number | string)[]`
- **Required**: No
- **Description**: No description available

### activeSnapPoint
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### setActiveSnapPoint
- **Type**: `(snapPoint: number) => void`
- **Required**: No
- **Description**: No description available

### fadeFromIndex
- **Type**: `number`
- **Required**: No
- **Description**: No description available

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

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

## Examples

### Example 1
```tsx
// Basic drawer with trigger and content
<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Settings</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>
        Adjust your preferences below
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p>Content goes here</p>
    </div>
    <DrawerFooter>
      <Button>Save</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```
### Example 2
```tsx
// Controlled drawer with state management
const [open, setOpen] = useState(false)
<Drawer open={open} onOpenChange={setOpen}>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Controlled Drawer</DrawerTitle>
    </DrawerHeader>
    <div className="p-4">
      <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
    </div>
  </DrawerContent>
</Drawer>
```
### Example 3
```tsx
// Drawer with snap points for multiple heights
<Drawer snapPoints={[0.4, 0.8]} fadeFromIndex={0}>
  <DrawerTrigger asChild>
    <Button>Open with Snap Points</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Expandable Drawer</DrawerTitle>
      <DrawerDescription>
        Drag to resize between 40% and 80% heights
      </DrawerDescription>
    </DrawerHeader>
    <div className="flex-1 p-4">
      <p>Content that can be viewed at different heights</p>
    </div>
  </DrawerContent>
</Drawer>
```
### Example 4
```tsx
// Side drawer from left or right
<Drawer direction="right">
  <DrawerTrigger asChild>
    <Button>Open Side Panel</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Side Navigation</DrawerTitle>
    </DrawerHeader>
    <div className="flex-1 p-4">
      <nav>Navigation items here</nav>
    </div>
  </DrawerContent>
</Drawer>
```