Drawer

Installation

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

npx shadcn@latest add https://prototyper-ui.com/r/drawer.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/drawer.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/drawer.json

This will add the following files to your project:

components/ui/drawer.tsx

Usage

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
} from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer description.</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Anatomy

<Drawer>
  <DrawerTrigger />
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle />
      <DrawerDescription />
    </DrawerHeader>
    {/* your content */}
    <DrawerFooter>
      <DrawerClose />
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Sub-component	`data-slot`	Purpose	Required
`Drawer`	`drawer`	Root provider, manages open/close state	Yes
`DrawerTrigger`	`drawer-trigger`	Button that opens the drawer	Yes
`DrawerPortal`	`drawer-portal`	Renders children into a portal	No
`DrawerOverlay`	`drawer-overlay`	Backdrop behind the drawer	No
`DrawerContent`	`drawer-content`	The drawer popup panel	Yes
`DrawerHeader`	`drawer-header`	Flex container for title and description	No
`DrawerTitle`	`drawer-title`	Accessible title for the drawer	Yes
`DrawerDescription`	`drawer-description`	Accessible description for the drawer	No
`DrawerFooter`	`drawer-footer`	Flex container for action buttons	No
`DrawerClose`	`drawer-close`	Button that closes the drawer	No

Examples

Directions

Use the direction prop on DrawerContent to slide the drawer in from any edge.

Styling

Data Slots

Use data-slot attributes to target specific parts of the drawer:

Slot name	Element
`drawer`	Root provider (no DOM element rendered)
`drawer-trigger`	The trigger button
`drawer-portal`	Portal wrapper
`drawer-overlay`	Backdrop overlay
`drawer-content`	The popup panel
`drawer-header`	Header container (title + description)
`drawer-title`	Title heading
`drawer-description`	Description paragraph
`drawer-footer`	Footer container (action buttons)
`drawer-close`	Close button(s)

Customization Examples

/* Make side drawers wider */
[data-slot="drawer-content"][data-drawer-direction="right"],
[data-slot="drawer-content"][data-drawer-direction="left"] {
  @apply sm:max-w-md;
}

/* Custom overlay color */
[data-slot="drawer-overlay"] {
  @apply bg-black/30;
}

{/* Override direction via prop */}
<DrawerContent direction="right">
  {/* ... */}
</DrawerContent>

API Reference

Root component that manages open/close state.

Prop

Type

All Base UI Drawer.Root props are forwarded via ...props.

DrawerTrigger

Button that opens the drawer when clicked.

Prop

Type

All Base UI Drawer.Trigger props are forwarded via ...props.

DrawerContent

The popup panel rendered inside a portal with an overlay backdrop. Includes an automatic drag handle when direction is "bottom".

Prop

Type

All Base UI Drawer.Popup props are forwarded via ...props.

DrawerHeader

Flex column container for title and description.

Prop

Type

All standard div props are forwarded via ...props.

DrawerFooter

Flex column container for action buttons.

Prop

Type

All standard div props are forwarded via ...props.

DrawerTitle

Accessible title for the drawer, rendered as a heading.

Prop

Type

All Base UI Drawer.Title props are forwarded via ...props.

DrawerDescription

Accessible description rendered below the title.

Prop

Type

All Base UI Drawer.Description props are forwarded via ...props.

DrawerClose

Button that closes the drawer when clicked.

All Base UI Drawer.Close props are forwarded via ...props.

DrawerOverlay

Backdrop overlay behind the drawer.

Prop

Type

All Base UI Drawer.Backdrop props are forwarded via ...props.

DrawerPortal

Renders children into a React portal.

Prop

Type

All Base UI Drawer.Portal props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Escape`	Closes the drawer
`Tab`	Moves focus to the next focusable element within the drawer
`Shift+Tab`	Moves focus to the previous focusable element within the drawer

ARIA Attributes

DrawerContent receives role="dialog".
aria-modal="true" is set when the drawer is modal.
aria-labelledby is automatically linked to DrawerTitle.
aria-describedby is automatically linked to DrawerDescription.
Focus is trapped inside the drawer while it is open.
Focus returns to the trigger element when the drawer closes.

Drawer

On this page