Drawer

Basic

A slide-in overlay for additional content or actions, anchored to the screen edge for quick access. Originally built by Devon Govett — check out his tweet for more insights. Want to enhance it, like making the drawer height adapt to its content? Contributions are welcome — send a PR!

Installation

npx shadcn@latest add @intentui/drawer

Composed components

Manual installation

npm i react-aria-components motion

Anatomy

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

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer Description</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>Drawer Body</DrawerBody>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
      <Button>Confirm</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Side

Use the side prop to change where the drawer appears. The default is left, but you can also use right, top, or bottom.

Float

To make the drawer float with spacing around it, set the isFloat prop to true. The default value is false.

Controlled

Manage the drawer’s open and close state programmatically.

Without notch

Remove the default notch styling by setting the notch prop to false.

Sticky

The drawer handles long content gracefully. Try scrolling within it.

Nested

Drawers can be nested inside each other for advanced layouts.