# Drawer

Side navigation drawer that slides in over a dimmed backdrop, with rows that can appear in turn and rolling unread counts. Tap a row to highlight it and close, or swipe the drawer away.

> Composed · Free · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add drawer
```

## Import

```tsx
import { Drawer } from "@/components/ui/drawer/drawer";
```

## Variants

- `nav` — Nav: `npx @lumioui/cli add drawer-nav`

## Props

### Drawer

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `side?` | `"left" | "right"` | Edge the drawer slides in from. Default "left". |
| `width?` | `number` | Drawer width in pt. Default 300. |
| `className?` | `string` | Extra classes for the drawer panel. |
| `pickHold?` | `number` | ms a picked item's lit pill holds before the drawer closes and the  item's onPress runs — the user sees the pick land. 0 closes at once.  Default 200. |
| `children` | `React.ReactNode` | — |

### DrawerItem

| Prop | Type | Notes |
| --- | --- | --- |
| `label` | `string` | Item label. |
| `icon?` | `React.ReactNode` | Optional icon slot before the label. |
| `active?` | `boolean` | Highlight as the active destination. |
| `trailing?` | `React.ReactNode` | Trailing slot — an unread count or badge, right-aligned. Strings  render as a muted label (bold when active); numbers roll per digit  when they change. |
| `index?` | `number` | Reading-order position — the row switches on 40ms after the one  above it on each open. Without it the rows switch on together. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/drawer