drawer/props

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Drawer CSS variables

The drawer exposes CSS variables for style-level customization. Set sizing variables on DrawerContent. Set the overlay variable on [data-slot=drawer-overlay] in your CSS. Variables: --drawer-inset (default: 0px) floats the drawer from viewport edges; --drawer-bleed-background (default: var(--color-popover)) fills gap behind drawer on swipe overshoot; --drawer-overlay-min-opacity (default: 0) sets minimum overlay opacity (defaults to 0.5 when snap points active).

Drawer data attributes for styling

The drawer sets data attributes for styling: data-swipe-direction (values: up, right, down, left) set always; data-swipe-axis (values: x, y) set always; data-snap-points present when drawer has snap points; data-expanded present when drawer at full snap point; data-swiping present during swipe; data-nested-drawer-open present when nested drawer open on top. Target with variants like data-[swipe-direction=down]: on DrawerContent or group-data-[swipe-axis=y]/drawer-popup: on descendants.

Drawer swipeDirection prop options

Use the swipeDirection prop to set the side of the drawer. Available options are up, right, down, and left.

Drawer swipe handle

Use showSwipeHandle on Drawer to render a swipe handle.

Drawer non-modal mode

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.

Drawer snapPoints configuration

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.

Drawer controlled snap point

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.

Drawer Base UI data attributes

Base UI exposes attributes like data-swiping, data-starting-style, and data-ending-style for swipe and transition states. Descendants inside DrawerContent can use group-data-[swipe-axis=x]/drawer-popup and group-data-[swipe-axis=y]/drawer-popup for axis-specific styling.

Give your agent this brain