Drawer

A drawer slides in from the edge of the screen to display content.

On this page

Props

placement

<Dialog>
  <Button>Open Drawer</Button>
  <Drawer>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Drawer Title</DialogTitle>
        <DialogDescription>This is a drawer description.</DialogDescription>
      </DialogHeader>
      <DialogBody>
        <p>Drawer content goes here.</p>
      </DialogBody>
      <DialogFooter>
        <Button slot="close">Close</Button>
      </DialogFooter>
    </DialogContent>
  </Drawer>
</Dialog>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/drawer

Usage

Use drawers to display content that slides in from the edge of the screen.

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Drawer } from '@/components/ui/drawer'

<Dialog>
  <Button>Open Drawer</Button>
  <Drawer placement="bottom">
    <DialogContent>Drawer content</DialogContent>
  </Drawer>
</Dialog>

Examples

Placement

Top

Left

Bottom

Right

API Reference

Drawer

A React Aria compatible drawer overlay powered by Base UI's Drawer overlay primitives.

Prop	Type	Default
	`DrawerPlacement`	`'bottom'`
	`boolean`	`true`
	`boolean`	`true`
	`boolean`	`false`
	`ReactNode`	`—`

DrawerHandle

A visible drag affordance.

Supports all div attributes.

Prop	Type	Default

DrawerSwipeArea

An edge region that can open the drawer by swiping.

Prop	Type	Default
	`boolean`	`false`
	`SwipeDirection`	`—`

DrawerProvider

Optional explicit visual-state scope. Most apps don't need this.

DrawerIndent

Wraps page content; scales/translates while a drawer is open.

Prop	Type	Default

DrawerIndentBackground

The dark layer behind the indented content.

Prop	Type	Default

Last updated on 6/16/2026