Components

Drawer

A panel that slides in from an edge of the screen.

Installation

npx shadcn@latest add @blank/drawer

Usage

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>…</DrawerFooter>
  </DrawerContent>
</Drawer>

A drawer is a Sheet you can drag to dismiss. Reach for it on touch screens.

Examples

Direction

direction opens the drawer from any edge. Bottom drawers show a drag handle; side and top drawers show a close button instead.