Drawer

About

Drawer is built on top of Vaul by emilkowalski_.

Installation

npx shadcn@latest 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="outline">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.