Components
Drawer
An iOS-like bottom sheet for mobile-first action menus, contextual tools, and focused follow-up steps.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add drawer to your project.
watermelon add drawer2
Import the component
Import Drawer from your local UI registry output.
Import
import { Drawer } from "@/components/ui/drawer";Import
Import
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";Usage
Use a drawer when actions should rise from the bottom in a mobile-first way instead of interrupting with a centered modal.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| open / defaultOpen | boolean | false | Controls the drawer visibility state. |
| onOpenChange | (open: boolean) => void | - | Called when the drawer opens or closes. |
| asChild | boolean | false | Lets trigger and close elements wrap existing buttons. |