Base Drawer

Base Drawer is a panel that slides in from a screen edge and responds to swipe gestures, with support for snap points, nested stacking, and an indent effect on the background. Use it for mobile-first navigation, filters, or detail panels where dragging to dismiss feels natural.

Preview

Installation

npx shadcn@latest add @cubby-ui/base-drawer

Usage

import {
  BaseDrawer,
  BaseDrawerClose,
  BaseDrawerDescription,
  BaseDrawerFooter,
  BaseDrawerHeader,
  BaseDrawerPopup,
  BaseDrawerTitle,
  BaseDrawerTrigger,
} from "@/components/ui/cubby-ui/base-drawer";

<BaseDrawer>
  <BaseDrawerTrigger />
  <BaseDrawerPopup>
    <BaseDrawerHeader>
      <BaseDrawerTitle />
      <BaseDrawerDescription />
    </BaseDrawerHeader>
    <BaseDrawerFooter>
      <BaseDrawerClose />
    </BaseDrawerFooter>
  </BaseDrawerPopup>
</BaseDrawer>

Composition

BaseDrawer
├── BaseDrawerTrigger
└── BaseDrawerPopup
    ├── BaseDrawerBar
    ├── BaseDrawerHeader
    │   ├── BaseDrawerTitle
    │   └── BaseDrawerDescription
    ├── BaseDrawerPanel
    └── BaseDrawerFooter
        └── BaseDrawerClose

Examples

Side Drawer

Use position="right" to slide the drawer in from the side.

Directions

Use position to open the drawer from any screen edge.

Controlled

Use the open and onOpenChange props on BaseDrawer to control the open state.

Snap Points

Use snapPoints on BaseDrawer to let the drawer rest at multiple heights. Numbers from 0 to 1 are viewport fractions, strings support px and rem units.

Floating Variant

Use variant="floating" on BaseDrawerPopup for inset spacing and fully rounded corners on desktop.

Inset Footer

Use variant="inset" on BaseDrawerFooter to separate the footer with a top border and muted background.

Nested Drawers

Nest drawers to stack them with scale and translate animations, each independently focus managed.

Indent Effect

Use BaseDrawerProvider, BaseDrawerIndentBackground, and BaseDrawerIndent to scale and round the background content when a drawer opens.

With Form

Use BaseDrawerPanel to hold form elements; it wraps content in Drawer.Content so text selection works without triggering swipe gestures.

Scrollable Content

Use BaseDrawerPanel for scrollable content that coexists with swipe gestures.

Menu Items

BaseDrawerMenu holds a list of touch-sized rows: use BaseDrawerMenuCheckboxItem for toggles and BaseDrawerMenuRadioGroup for single-choice options, both with their indicator in a reserved right-hand column. Set indicator="switch" on a checkbox item for settings that apply immediately.

Unlike the other menu components, these rows are real checkbox and radio controls rather than Base UI menu items, so each one is individually focusable.

API Reference

Built on Base UI's Drawer. All Base UI Drawer props are supported.

Props

BaseDrawer

Root component that manages drawer state. Wraps Base UI's Drawer.Root.

BaseDrawerPopup

Convenience composite that renders Portal + Backdrop + Viewport + Popup. This is the main content wrapper.

BaseDrawerPanel

Scrollable content area. Wraps ScrollArea and Drawer.Content for text selection support.

BaseDrawerFooter

BaseDrawerMenuCheckboxItem

Toggleable drawer row. Wraps Base UI's Checkbox.Root, so it is a real focusable checkbox rather than a menu item. The indicator sits in a reserved column on the right.

BaseDrawerMenuRadioItem

Single-choice drawer row. Wraps Base UI's Radio.Root and must sit inside a BaseDrawerMenuRadioGroup. Uses the same right-aligned checkmark as BaseDrawerMenuCheckboxItem.

Components

CSS Variables

Base UI's Drawer exposes CSS custom properties on the popup element: