Components
Drawer
An iOS-like bottom sheet for mobile-first action menus, contextual tools, and focused follow-up steps.
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. |