Drawer
Bottom sheet drawer built on Vaul. Supports drag-to-dismiss and scale background.
Install
Import path
Examples
Responsive Dialog
You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Scrollable Content
Keep actions visible while the content scrolls.
Sides
Use the direction prop to set the side of the drawer. Available options are top, right, bottom, and left.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Drawer, DrawerTrigger, DrawerContent,
DrawerHeader, DrawerTitle, DrawerDescription,
DrawerFooter, DrawerClose,
} from "@codefast/ui/drawer";
<Drawer>
<DrawerTrigger asChild>…</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>…</DrawerTitle>
</DrawerHeader>
…
<DrawerFooter>
<DrawerClose>…</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
API reference
Props for each part of the component. All native element props are also forwarded.
Drawer
Root. A bottom sheet built on Vaul with gesture support.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control visibility from your own state. |
| shouldScaleBackground | boolean | true | Scale the page behind the drawer as it opens. |
DrawerContent / DrawerClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The panel content; DrawerClose dismisses the drawer. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Cycles focus within the drawer (trapped). |
| Esc | Closes the drawer. |
- Supports drag-to-dismiss on touch, with a keyboard path to close too.
- Always provide a DrawerTitle for an accessible name.
- On desktop, a Sheet or Dialog is often a better fit than a bottom drawer.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use on mobile for quick, focused tasks reachable by thumb.
- Keep content short so the drawer doesn’t fill the screen.
Don’t
- Don’t put long, multi-step flows in a drawer.
- Don’t use a drawer where a Dialog reads better on desktop.