Docs
Drawer
Drawer
A drawer component for React.
About
Drawer is built on top of Vaul by emilkowalski_.
Installation
npx @pujan-modha/pm-ui add drawer
Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
<DrawerDescription>This action cannot be undone.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose>
<Button variant="default">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
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.