Sheet

Extends the Dialog component to display content that complements the main content of the screen — slides in from any edge.

SheetContentside: top · right (default) · bottom · left — showCloseButton · showOverlay

SheetHeader / SheetFooterlayout containers

SheetTitle / SheetDescriptionheading + supporting text

SheetClosedismiss — render as any element

Playground

Side— side

Show close button— showCloseButton

slides in from the right

side="top" · "right" · "bottom" · "left"

showCloseButton={false} — dismiss via footer action only

modal={false} + showOverlay={false} — the page stays interactive behind the sheet

7 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--foregroundForeground

text-foreground

--muted-foregroundMuted Foreground

text-muted-foreground

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring