Drawer

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

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

Was this example helpful?

Usage#

Code
import { Drawer } from "@medusajs/ui"
Code
1<Drawer>2  <Drawer.Trigger>Trigger</Drawer.Trigger>3  <Drawer.Content>4    <Drawer.Header>5      <Drawer.Title>Drawer Title</Drawer.Title>6    </Drawer.Header>7    <Drawer.Body>Body</Drawer.Body>8    <Drawer.Footer>Footer</Drawer.Footer>9  </Drawer.Content>10</Drawer>

API Reference#

Drawer#

This component is based on the Radix UI Dialog primitives.

Drawer.Trigger#

This component is used to create the trigger button that opens the drawer. It accepts props from the Radix UI Dialog Trigger component.

Drawer.Content#

This component wraps the content of the drawer. It accepts props from the Radix UI Dialog Content component.

PropTypeDefault
overlayProps
ComponentPropsWithoutRef
-
portalProps
ComponentPropsWithoutRef
-
Was this helpful?

Drawer.Header#

This component is used to wrap the header content of the drawer. This component is based on the div element and supports all of its props.

Drawer.Title#

This component adds an accessible title to the drawer. It accepts props from the Radix UI Dialog Title component.

Drawer.Body#

This component is used to wrap the body content of the drawer. This component is based on the div element and supports all of its props

Drawer.Footer#

This component is used to wrap the footer content of the drawer. This component is based on the div element and supports all of its props.


Examples#

Drawer with Form#

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

Was this guide helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break