A slide-in panel that provides additional navigation or content without disrupting the main interface, ideal for side menus, overlays, and supplementary information.

RAC Motion

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/drawer

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

button

Manual installation

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

npm

pnpm

yarn

bun

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

The Drawer component controls the drawer trigger and content.

DrawerTrigger

The DrawerTrigger component defines the element that opens a drawer.

Prop	Type	Default
`className`	`string`	-

DrawerBody

The DrawerBody component wraps the main drawer content.

Prop	Type	Default
`className`	`string`	-

DrawerClose

The DrawerClose component renders a button that closes the drawer.

Prop	Type	Default
`className`	`string`	-

DrawerContent

The DrawerContent component renders the drawer panel.

Prop	Type	Default
`className`	`string`	-
`isFloat`	`boolean`	`false`
`notch`	`boolean`	`true`
`overlay`	`Pick<ModalOverlayProps, "className">`	-
`side`	`"top" \| "bottom" \| "left" \| "right"`	`bottom`

DrawerDescription

The DrawerDescription component renders supporting text inside a drawer.

Prop	Type	Default
`className`	`string`	-

DrawerFooter

The DrawerFooter component groups drawer actions.

Prop	Type	Default
`className`	`string`	-

DrawerHeader

The DrawerHeader component groups the drawer title and description.

Prop	Type	Default
`className`	`string`	-

DrawerTitle

The DrawerTitle component renders the drawer heading.

Prop	Type	Default
`className`	`string`	-

See the React Aria and Motion for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Dialog

Modal

Drawer

On this page