Drawers
A drawer component for mobile-friendly slide-out panels. Supports multiple directions (top, bottom, left, right) with smooth animations and touch gestures. Ideal for mobile navigation, filters, and secondary content.
Installation
Import
Usage
Drawers are ideal for mobile interfaces, providing a slide-out panel for navigation, filters, forms, and secondary content. Use bottom drawers for mobile-friendly actions and confirmations. Use side drawers (left/right) for navigation menus and settings panels. Use top drawers for notifications and alerts. Drawers are touch-friendly and support swipe gestures for dismissal.
Design Guidelines
Drawers should be easily dismissible with swipe gestures or close buttons. Use appropriate sizing for the content - bottom drawers typically take up 50-80% of screen height on mobile. Include a visual handle (drag indicator) for bottom drawers. Ensure drawers are accessible with proper focus management and keyboard navigation. Use DrawerHeader for titles and descriptions, and DrawerFooter for action buttons. Keep content scannable and avoid overwhelming users with too much information.
Basic Usage
Simple drawer from the bottom
From Top
Drawer that slides in from the top
From Left
Drawer that slides in from the left
From Right
Drawer that slides in from the right
With Form
Drawer containing a form
Drawer
Root drawer component This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
onOpenChange | (open: boolean) => void | undefined | Callback fired when open state changes |
direction | "top" | "bottom" | "left" | "right" | "bottom" | Direction from which the drawer slides in |
className | string | — | Additional CSS classes to apply to the component |
DrawerTrigger
Trigger button that opens the drawer extends Button. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |
DrawerContent
Main content container for the drawer This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
DrawerHeader
Header section container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
DrawerTitle
Title text for the drawer This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
DrawerDescription
Description text for the drawer This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
DrawerFooter
Footer section container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
DrawerClose
Close button component extends Button. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |