---
title: Drawer
description: A panel from the right edge for details that keep the list in view.
---

```tsx
import { Button, Drawer } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function DrawerBasic() {
  return (
    <Preview overlay={true}>
      <Drawer.Root swipeDirection="right">
        <Drawer.Trigger render={<Button.Root />}>Open drawer</Drawer.Trigger>
        <Drawer.Content>
          <Drawer.Header>
            <Drawer.Title>Title</Drawer.Title>
            <Drawer.Description>Description</Drawer.Description>
          </Drawer.Header>
        </Drawer.Content>
      </Drawer.Root>
    </Preview>
  );
}
```

- Use a drawer to inspect one item, such as a span or a log line, without leaving the list.
- Use a [Dialog](/deft/components/dialog) for a task that needs the person's full attention, such as a form.
- Pass `swipeDirection="right"` to `Drawer.Root`. Base UI defaults to `"down"`, so without it a swipe doesn't close the drawer.
- `Drawer.Header`, `Drawer.Body` and `Drawer.Footer` are the [Dialog](/deft/components/dialog) parts, so a drawer and a dialog share their spacing.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `size?` | `"md" \| "lg"` | `"md"` | On Content. `lg` is wider, for details with long values. |
| `showClose?` | `boolean` | `true` | On Content. Shows a ghost close button in the top-right corner. |

Parts: `Root`, `Body`, `Content`, `Description`, `Footer`, `Header`, `Title`, and Base UI's `Trigger` and `Close`. `Content` renders the portal, backdrop and viewport itself and passes its other props to the Base UI `Popup`; the other Base UI parts come through unchanged. Built on Base UI [Drawer](https://base-ui.com/react/components/drawer).