Overlays · §5.19
Drawer
A bottom sheet with a grabber.
Code
<Drawer><DrawerContent>…</DrawerContent></Drawer>Accessibility
- Swipe is never the only way to close; a button always does.
Usage
Do
- Bottom sheets on phones.
Don't
- Content inside stays on solid surfaces.
Platforms
- Web
- apps/web/components/ui/drawer.tsx
- iOS
- SwiftUI .presentationDetents
- Android
- Compose ModalBottomSheet