---
title: "Drawer"
description: "A side panel for editing or filtering without losing the table behind it. It keeps context, enters from one side and returns focus on close."
kind: component
id: C-032
registry: "drawer"
docs: "https://koten.codehive.com.co/components/drawer"
markdown: "https://koten.codehive.com.co/md/components/drawer.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/drawer.json"
language: en
---

# Drawer · ドロワー

> Component C-032 in the Koten UI catalog.

A side panel for editing or filtering without losing the table behind it. It keeps context, enters from one side and returns focus on close.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/drawer.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/drawer.json
```

## Files

- `@/components/ui/drawer.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **portal** — Portaled popup: The panel mounts inside BaseDrawer.Portal with its backdrop. Do not nest it in overflowing containers or it will be clipped.

## Reference

- Upstream primitive: https://base-ui.com/react/components/dialog

## Examples

### Side filters

Enters from the right with a description and a footer action; the maximum width is 480 px.

```tsx
<Drawer
  trigger={<Button variant="secondary">Open drawer</Button>}
  title="Order filters"
  description="Apply and close to see the results."
  closeLabel="Close"
  side="right"
  footer={<Button variant="primary">Apply filters</Button>}
>
  <p>The drawer keeps the table context and is meant for side editing.</p>
</Drawer>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `trigger` | `ReactElement` | `—` | The element that opens the panel; it receives the trigger props. |
| `title` | `ReactNode` | `—` | Required: it gives the drawer its accessible name. |
| `description` | `ReactNode` | `—` | Optional; explains what the panel does. |
| `children` | `ReactNode` | `—` | The scrollable content of the panel. |
| `footer` | `ReactNode` | `—` | Actions pinned to the bottom; no automatic close control is added. |
| `closeLabel` | `string` | `—` | Accessible text for the header close button. |
| `side` | `left \| right` | `right` | The side the panel enters from; it also sets the swipe direction. |
| `className` | `string` | `—` | Merged with the max width and the border of the active side. |

## Accessibility

- Title and description name the panel and explain its purpose.
- Focus enters the panel, stays trapped, and returns to the trigger when Escape closes it.
- The header close control is an icon, so closeLabel is required.
- The swipe gesture follows side and does not replace the close button.

## Sources

- Catalog page: https://koten.codehive.com.co/components/drawer
- Markdown: https://koten.codehive.com.co/md/components/drawer.md
- Repository: https://github.com/codehive-colombia/koten