Drawer

A drawer component for React.

Open Drawer

<Drawer
  open={open}
  onOpenChange={setOpen}
  showSwipeHandle={isMobile}
  swipeDirection={isMobile ? "down" : "right"}
>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open Drawer
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Pick a delivery time</DrawerTitle>
      <DrawerDescription>
        We'll prepare your order as soon as possible.
      </DrawerDescription>
    </DrawerHeader>
    <div className="flex-1 overflow-y-auto p-4">
      <RadioGroup value={deliveryTime} onValueChange={setDeliveryTime}>
        {/* delivery time options */}
      </RadioGroup>
    </div>
    <DrawerFooter>
      <Button onClick={handleConfirm}>Confirm Delivery Time</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Installation

pnpm dlx cubix@latest add drawer --base aria

Add the following to your global styles. On iOS Safari, the drawer overlay is absolutely positioned and requires a positioned body to cover the viewport after the page is scrolled. See the Base UI docs for details.

app/globals.css

body {
  position: relative;
}

Usage

Import

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

Example

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">{/* Content here */}</div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Composition

Use the following composition to build a Drawer:

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter

DrawerContent composes the portal, overlay, viewport, and popup from Base UI. For lower-level control, DrawerPortal, DrawerOverlay, and DrawerSwipeHandle are also exported.

Custom Sizes

A vertical drawer sizes itself to its content and is capped at calc(100dvh - 6rem) by default. A side drawer spans 75% of the viewport width, or 24rem on larger screens.

To customize the height of a vertical drawer, use the h-* and max-h-* utilities on DrawerContent.

<DrawerContent className="h-[50vh]">

To customize the width of a side drawer, use the w-* and max-w-* utilities on DrawerContent.

<DrawerContent className="w-96">

When the same component renders in multiple directions, scope an override to one axis using the data-[swipe-axis=*] variants.

<DrawerContent className="data-[swipe-axis=y]:max-h-[50vh] data-[swipe-axis=x]:w-96">

To make a region of the drawer scrollable, make the scroll container a flex item. Avoid h-full, which does not resolve inside a content-sized drawer.

<DrawerContent>
  <DrawerHeader>...</DrawerHeader>
  <div className="flex-1 overflow-y-auto p-4">{/* Scrollable content */}</div>
  <DrawerFooter>...</DrawerFooter>
</DrawerContent>

Layouts

Compose drawers with a header, footer, both, or edge-to-edge content.

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Header</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>
        Make changes to your profile here.
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">{/* Content */}</div>
  </DrawerContent>
</Drawer>

Styling

The drawer exposes CSS variables for style-level customization. Set the sizing variables on DrawerContent. Set the overlay variable on [data-slot=drawer-overlay] in your CSS.

Variable	Default	Description
--drawer-inset	--spacing(2)	Floats the drawer from the viewport edges.
--drawer-bleed-background	var(--color-popover)	Fills the gap behind the drawer on swipe overshoot.
--drawer-overlay-min-opacity	0	Minimum overlay opacity. Defaults to `0.5` when snap points are active.

The drawer also sets data attributes you can target with variants such as data-[swipe-direction=down]: on DrawerContent, or group-data-[swipe-axis=y]/drawer-popup: on its descendants.

Attribute	Values	Set when
data-swipe-direction	up, right, down, left	Always.
data-swipe-axis	x, y	Always.
data-snap-points	Present	The drawer has snap points.
data-expanded	Present	The drawer is at the full snap point.
data-swiping	Present	A swipe is in progress.
data-nested-drawer-open	Present	A nested drawer is open on top.

Position

Use the swipeDirection prop to set the side of the drawer.

Available options are up, right, down, and left.

<Drawer swipeDirection="right">
  <DrawerTrigger render={<Button variant="outline" />}>right</DrawerTrigger>
  <DrawerContent>
    {/* ... */}
  </DrawerContent>
</Drawer>

Swipe Handle

Use showSwipeHandle on Drawer to render a swipe handle.

<Drawer swipeDirection="down" showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>down</DrawerTrigger>
  <DrawerContent>
    {/* ... */}
  </DrawerContent>
</Drawer>

Nested

Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer.

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerFooter>
      <Drawer>
        <DrawerTrigger render={<Button />}>Open nested drawer</DrawerTrigger>
        <DrawerContent>{/* ... */}</DrawerContent>
      </Drawer>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Non Modal

Set modal={false} to allow interaction with the rest of the page while the drawer is open. Combine with disablePointerDismissal to prevent the drawer from closing on outside presses. Use modal="trap-focus" to keep focus inside the drawer while leaving scroll and pointer interaction unrestricted.

Non Modal

<Drawer
  modal={false}
  disablePointerDismissal
  swipeDirection="right"
>
  <DrawerTrigger render={<Button variant="outline" />}>Non Modal</DrawerTrigger>
  <DrawerContent>{/* ... */}</DrawerContent>
</Drawer>

Snap Points

Use snapPoints to snap a drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport. Numbers greater than 1 are treated as pixel values. String values support px and rem units. Snap points apply to vertical drawers.

Track the active snap point with the controlled snapPoint and onSnapPointChange props. At the full snap point, the drawer gets a data-expanded attribute you can style with the data-expanded: variant.

Open Snap Drawer

<Drawer snapPoints={["31rem", 1]} showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open Snap Drawer
  </DrawerTrigger>
  <DrawerContent className="max-h-[calc(100dvh-1rem)]">
    {/* ... */}
  </DrawerContent>
</Drawer>

Responsive

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

Edit Profile

"use client"

import * as React from "react"

import { useIsMobile } from "@/hooks/use-mobile"
import { Button } from "@/components/cubix/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/cubix/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/cubix/drawer"

export function DrawerDialogDemo() {
  const [open, setOpen] = React.useState(false)
  const isMobile = useIsMobile()

  if (!isMobile) {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger render={<Button variant="outline" />}>
          Edit Profile
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here.
            </DialogDescription>
          </DialogHeader>
          {/* form */}
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Edit Profile
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Edit profile</DrawerTitle>
          <DrawerDescription>
            Make changes to your profile here.
          </DrawerDescription>
        </DrawerHeader>
        {/* form */}
        <DrawerFooter>
          <DrawerClose render={<Button variant="outline" />}>
            Cancel
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

API Reference

See the Base UI documentation for the full API reference.

Drawer

Prop	Type	Default	Description
swipeDirection	"up" \| "right" \| "down" \| "left"	"down"	Edge of the screen the drawer opens from.
showSwipeHandle	boolean	false	Render a swipe handle inside DrawerContent.
modal	boolean \| "trap-focus"	true	When false, allow interacting with the rest of the page. Use trap-focus to keep focus inside without blocking pointer events.
disablePointerDismissal	boolean	-	Prevent closing when pressing outside the drawer.
snapPoints	(number \| string)[]	-	Preset heights for vertical drawers. Values between 0 and 1 are viewport fractions; larger numbers are pixels; strings support px and rem.
snapPoint	number \| string \| null	-	Controlled active snap point.
onSnapPointChange	(snapPoint: number \| string \| null) => void	-	Called when the active snap point changes.
children	React.ReactNode	-	Trigger and content elements for the drawer.

DrawerTrigger / DrawerClose

Prop	Type	Default	Description
render	React.ReactElement	-	Render the trigger or close control as another element (e.g. a Button).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

DrawerContent

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles. Use h-, max-h-, w-, or max-w- to size the drawer.

DrawerHeader / DrawerFooter / DrawerTitle / DrawerDescription

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).