Sheet with Title and Description for React

SheetTitle reads Sheet Title and SheetDescription reads This is a description that provides additional context about the sheet content. Both sit in SheetHeader, and nothing else is in the panel.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. SheetDescription is optional; it's read after the title when the sheet opens.

SheetContent leaves side unset, so the panel comes from the right. Set side to top, bottom or left to move it. The title and the focus trap work the same on every edge.

The button labeled Open Sheet is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

Set showCloseButton to false on SheetContent. Then add a visible Close button, for example in a SheetFooter. Escape still closes the sheet.

Use a Sheet when the panel should slide in from a screen edge and keep the page in view behind it. A centered confirmation is a Dialog. A panel people drag, usually up from the bottom on a phone, is a Drawer.