Drawer

Installation

npx baseui-cn add drawer

The side prop controls placement. Set the matching swipeDirection on Drawer: right, left, down for bottom, or up for top. The popup owns scrolling; long content and footer actions remain reachable inside it. The wrapper includes Base UI’s gesture viewport.

Usage

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

<Drawer swipeDirection="right">
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Manage your preferences.</DrawerDescription>
    </DrawerHeader>
    <div className="flex-1 p-6">Content here.</div>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Note: Built on Base UI Drawer (stable v1.3.0, March 2026). All other Base UI overlays — Select, Combobox, Tooltip — work correctly inside it, sharing the same portal system.

Examples

Right

Default — slides in from the right.

Bottom sheet

Use side="bottom" for a mobile bottom sheet.

Left

Slides in from the left.

With form

A drawer containing a form.

Nested Select

Select inside a Drawer — no z-index issues.

With toast

Perform an action inside the drawer and show a toast. Because Base UI uses a shared portal system, closing the toast does not close the drawer.

API

DrawerContent