Drawer
A sliding panel that appears from any edge of the screen. Built on Radix UI Dialog with multiple positions and sizes for mobile-friendly interfaces.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Drawer component
Copy this code to create your Drawer component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Positions
Drawers can slide in from any side of the screen: left, right, top, or bottom to accommodate different UI requirements.
API Reference
The Drawer component is built on top of the Radix UI Dialog primitive and extends its functionality with additional positioning options and styling.
Drawer.Root
The container component that provides the main drawer functionality.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
open | "boolean" | "undefined" | The controlled open state of the drawer. |
onOpenChange | "function" | "undefined" | Event handler called when the open state of the drawer changes. |
defaultOpen | "boolean" | "false" | The open state of the drawer when it is initially rendered. |
Drawer.Content
The component that contains the drawer content and handles positioning and animations.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "left""right""top""bottom" | "right" | The position from which the drawer slides in. |
size | "xs""sm""md""lg""xl""full" | "md" | The size of the drawer, affecting width or height depending on position. |
showCloseButton | "boolean" | "false" | Whether to show a close button in the drawer header. |
className | "string" | "undefined" | Additional CSS classes to apply to the drawer content. |
Drawer.Header
The header section of the drawer, typically containing a title and optional close button.
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | "boolean" | "false" | Whether to show a close button in the header. Overrides the context value from Drawer.Content. |
className | "string" | "undefined" | Additional CSS classes to apply to the header. |
Drawer.Body
The main content area of the drawer with automatic overflow handling.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the body. |
Drawer.Footer
The footer section of the drawer, typically containing action buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the footer. |
Drawer.Title
The title component for the drawer header.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the title. |
Drawer.Description
The description component for the drawer header.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the description. |