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.
Usage#
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.
Prop | Type | Default |
---|---|---|
overlayProps | ComponentPropsWithoutRef | - |
portalProps | ComponentPropsWithoutRef | - |
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.