Design System v1.0

Sheet

A dialog panel that slides in from an edge of the screen.

Side panel

A right-side sheet with a header, form fields, and footer actions.

API reference

A dialog panel that slides in from an edge. A Trigger opens a portalled Content with header/footer, title, description, and close.

Full props on Base UI Dialog
Anatomy
SheetRoot managing the sheet's open state.
SheetTriggerOpens the sheet; pass a Button via the render prop.
SheetCloseCloses the sheet; wrap a Button via the render prop.
SheetContentThe sliding panel; takes a side prop (default right).
SheetHeaderTop section for the title and description.
SheetFooterBottom section for action buttons.
SheetTitleAccessible heading for the panel.
SheetDescriptionMuted supporting text under the title.

Command Palette

Search for a command to run...