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.

Usage

import { Drawer } from "@medusajs/ui"

<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.