layout contract

Sheet

Edge-anchored panel that slides in for secondary tasks.

Variants

  • right
  • left
  • top
  • bottom

Sizes

  • sm
  • md
  • lg
  • full

Slots

  • header
  • content
  • footer

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.

Get the Sheet contract in your project.