Drawer
A bottom sheet that slides up and dismisses with a downward swipe — the most mobile-native surface in seamui.
tsx
import { Button } from "@/registry/seam/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
DrawerClose,
} from "@/registry/seam/ui/drawer"
export default function DrawerDemo() {
return (
<Drawer>
<DrawerTrigger render={<Button variant="outline">Open drawer</Button>} />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Mobile sheet</DrawerTitle>
<DrawerDescription>
Drag the handle down to dismiss — Base UI's native swipe
physics, backdrop dimming as you go.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose render={<Button>Done</Button>} />
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}bunx --bun @seamui/cli@latest add drawerNotes
- Swipe-to-dismiss stays Base UI's native drag — a 1:1 gesture from the grab handle, with the backdrop dimming in proportion to the drag.
- The non-gesture slide rides the standalone
translateproperty (Base UI ownstransformfor the drag) and self-suppresses mid-swipe so the gesture stays 1:1. - Swipe is an enhancement, not the only way out — Escape and backdrop click dismiss too. Focus trap and scroll lock work like Dialog.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.