layout contract
Sheet
Edge-anchored panel that slides in for secondary tasks.
Variants
- right
- Slides from right (default desktop)
- left
- Slides from left
- top
- bottom
- Mobile sheets
Sizes
- sm
- 320pt
- md
- 480pt
- lg
- 640pt
- full
- Edge-to-edge
Slots
- header
- Title + close button
- content
- Main body
- footer
- Sticky actions
Example
<Sheet open={open} onOpenChange={setOpen}><SheetContent variant="right" size="md">...</SheetContent></Sheet>Usage rule
role="dialog" + aria-modal="true" + aria-labelledby pointing at the header.
The full Sheet contract has 5 more rules, plus the do-not patterns. Get the full recipe.