Components

Drawer

A panel that slides in from the edge or the bottom to show details, filters or a sub-form without leaving the page.

28 October 2026

Added

First version: an edge and bottom panel on Base UI Drawer.
title, description, children, footer, trigger, side, size, modal, open, defaultOpen, onOpenChange, closeLabel; Drawer.Close.
Swipe to close towards the edge; bottom sheet with a handle below 640 px; mirrored in right-to-left text.
motion.drawer and the new motion.sheet; drawer-width-* and drawer-handle-* component tokens.
The part prop types are exported: DrawerCloseProps.
side="start" and side="top"; start becomes a bottom sheet below 640 px.
The parts API: Drawer.Root, Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer.

Changed

The panel takes the border-overlay hairline; the free corners are 14 px round and the edge against the screen is square.
On a narrow viewport a sm or md drawer keeps its own height as a bottom sheet (320 and 560 px, drawer-sheet-height-*).
side="start" mirrors the end drawer: the overlay hairline instead of a border, 14 px inner corners.
side="top" mirrors the bottom sheet: no border, 14 px bottom corners; size sm and md cap its height at 320 and 560 px.
Padding is 24 px from 640 px up. The handle shows by default when the sheet has snap points. The swipe strength is clamped between 0.5 and 1. The backdrop is 32 % black in light mode and 48 % in dark.