Drawer

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/drawer

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components motion tailwind-merge

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>

Examples

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.

Component API

Drawer

DrawerTrigger

DrawerBody

DrawerClose

DrawerContent

DrawerDescription

DrawerFooter

DrawerHeader

DrawerTitle