---
title: "Drawer"
description: "A triggerable drawer that overlaps whatever page it's on."
component: true
---

<ComponentExample name="drawer-demo" />

## Usage

---

```tsx
import { Drawer } from "@medusajs/ui"
```

```tsx
<Drawer>
  <Drawer.Trigger>Trigger</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
    </Drawer.Header>
    <Drawer.Body>Body</Drawer.Body>
    <Drawer.Footer>Footer</Drawer.Footer>
  </Drawer.Content>
</Drawer>
```

## API Reference

---

<ComponentReference mainComponent="Drawer" componentsToShow={[
  "Drawer",
  "Drawer.Trigger",
  "Drawer.Content",
  "Drawer.Header",
  "Drawer.Title",
  "Drawer.Body",
  "Drawer.Footer"
]} />