Drawer
A panel that slides in from the edge of the screen.
Preview
About
Drawer is built on top of Vaul by emilkowalski.
Installation
Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHandle,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DrawerHandle />
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
<DrawerDescription>This action cannot be undone.</DrawerDescription>
<DrawerFooter>
<Button>Submit</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>API Reference
Drawer
Root component. Wraps Drawer.Root from Vaul.
DrawerTrigger
Trigger element that opens the drawer.
DrawerContent
Content container. Wraps Drawer.Portal, Drawer.Overlay, and Drawer.Content.
DrawerHandle
Drag handle indicator. Visible only for bottom direction.
DrawerHeader
Container for the title, description, close button, and a separator.
DrawerFooter
Footer section with a separator and action buttons.
DrawerTitle
Title component. Wraps Drawer.Title from Vaul.
DrawerDescription
Description component. Wraps Drawer.Description from Vaul.
DrawerClose
Close button rendered as an icon button with a cancel icon.