GitHub

Go to...

Choose a page to open.

A panel that slides in from an edge of the screen and closes with a swipe.

Drawer

drawer-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/drawer.json

Usage

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Cancel your subscription?</DrawerTitle>
      <DrawerDescription>
        Your plan stays active until 30 June.
      </DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Set showSwipeHandle on Drawer to show a grab handle.

Examples

Side

The swipeDirection prop of Drawer sets the edge and the swipe that closes the drawer. The default is down.

drawer-side