---
generate_toc: true
---

import { ComponentExample } from "@/components/ComponentExample"
import { ComponentReference } from "@/components/ComponentReference"

export const metadata = {
  title: `Drawer`,
}

# {metadata.title}

A component for rendering a sliding panel that overlays the main content.

In this guide, you'll learn how to use the Drawer component.

<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"
]} />

---

## Examples

### Drawer with Form

This example shows a simple form inside a Drawer, demonstrating how to use form elements and handle submission.

<ComponentExample name="drawer-form" hideFeedback />