Docs
Drawer
Drawer
A draggable dialog that is attached to any side of the viewport.
Installation
Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerLabel,
DrawerTrigger
} from "@/components/ui/drawer";<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DialogHeader>
<DrawerLabel>Are you sure absolutely sure?</DrawerLabel>
<DialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</DialogDescription>
</DialogHeader>
</DrawerContent>
</Drawer>Examples
Side
Use the side property to <Drawer /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.