layout contract

Drawer

Mobile-first bottom sheet that slides up from the screen edge.

Variants

sheet
Standard half-screen sheet
fullscreen
Snaps to fullscreen on second drag-up

Sizes

  • md
  • lg

Example

<Drawer open={open} onOpenChange={setOpen} snapPoints={[0.5, 1]}>...</Drawer>

Usage rule

Drag handle on top — 36×4pt rounded bar at color.fill.tertiary.

The full Drawer contract has 5 more rules, plus the do-not patterns. Get the full recipe.

Related

Get the Drawer contract in your project.