# Bottom drawer (goodtabs UI)

A bottom sheet with a drag handle that also closes from the keyboard.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/bottom-drawer.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/bottom-drawer`

## Usage

```tsx
import { BottomDrawer } from "@/components/ui/bottom-drawer"
import { Button } from "@/components/ui/button"

<BottomDrawer trigger={<Button variant="outline">More</Button>} title="More actions">
  ...
</BottomDrawer>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactElement` |  | The control that opens the drawer. |
| title | `string` |  | The drawer title. Also names the scrolling body. |
| description | `string` |  | One line under the title. |

## When to use

- Action lists and pickers on phones
- Secondary content that should keep the page visible behind it
- Anywhere a thumb should reach the controls

## When not to use

- Wide desktop layouts, which want a side panel or popover
- Blocking confirmations, which want a dialog
- Content with its own horizontal drag, which conflicts with the handle

## Notes for agents

- Client component; the handle uses pointer events and closes past 96px or a quick flick
- Keyboard path: focus the handle and press ArrowDown, or use Escape
- Only the handle drags, so the body can scroll freely on touch
- Drag moves the panel with an inline translateY; no layout properties change
- Built on @/components/ui/sheet with side bottom and the default close button hidden

Docs: https://ui.goodtabs.co/components/bottom-drawer