Overlays

Drawer

A sheet that slides up from the bottom edge and can be dragged back down. Built for touch.

Bottom Drawer

Import

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@mikenotthepope/substrateui"

Composition

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

Accessibility

Built on Base UI's Drawer, which implements focus trapping and restoration and closes on Escape. The backdrop is marked aria-hidden.

Every drawer must have a DrawerTitle. If the title should be visually hidden, wrap it in VisuallyHidden from Base UI so the accessible name is still announced.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the drawer.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.