StorybookGitHub

Drawer

A panel that slides in from an edge of the screen, built on Vaul.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/drawer.json

Usage

Use a drawer instead of a dialog on smaller viewports, or whenever a bottom/side sheet with a drag handle feels more natural than a centered modal. Direction defaults to bottom; pass direction="right", "left", or "top" to Drawer to change the edge it slides in from.

<script setup lang="ts">
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
</script>

<template>
  <Drawer>
    <DrawerTrigger as-child>
      <Button variant="outline">Open Drawer</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Edit profile</DrawerTitle>
        <DrawerDescription>Make changes to your profile here.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <DrawerClose as-child>
          <Button variant="outline">Cancel</Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</template>