Components / Overlays

Drawer native

A panel sliding in from an edge (a bottom sheet on phones).

Replaces
Sheet
Children
many
Loading the renderer…
Drawer rendered by the React renderer on Web
Web React
Drawer rendered by the SwiftUI renderer on iOS
iOS SwiftUI
Drawer rendered by the Compose renderer on Android
Android Compose
Drawer rendered by the gpui renderer on Desktop
Desktop gpui

View exponential-ui-drawer, painted by each native renderer.

PropTypeDefaultDescription
titlestring–The drawer heading.
descriptionstring–A muted line under the heading.
openbindbooleanfalseWhether it shows; bind it to a boolean path.
sideresptop | right | bottom | left"bottom"The edge it slides from; {base: "bottom", md: "right"} turns the phone sheet into a side panel on wide surfaces.
dismissiblebooleantrueCloses on the backdrop or Escape.
dragToDismissbooleantrueLets a swipe toward its edge close it.
NameKind
on.changeevent: runs an action
triggerslot: one component by id
footerslot: one component by id
Role
dialog
Semantics
dialog (modal)
KeysAction
–As Dialog; a swipe toward the edge closes when dragToDismiss
Recipe parts
Drawer/overlayDrawer/contentDrawer/handleDrawer/titleDrawer/descriptionDrawer/footer
Keyed by
sidedismissible:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

Sheet shell

Top radius 24 over the page's bottom gradient, a card hairline, a 36×4 grabber.

More

Header gutter 20, content gutter 16. Dismissal is the grabber drag or the backdrop — the header's trailing slot holds an optional ACTION, never a Cancel — and the bottom carries exactly one primary.

Webok
SheetContent side="bottom"packages/ui/src/sheet.tsx
iOSok
GlassSheetChrome + GlassSheetTokensapps/ios/ExpUI/Sources/GlassSheet.swift
Desktopn/a

dialogs are OS windows