Top-Sliding Sheet for React

Set side="top" on SheetContent. Leave it out and the sheet opens from the right. It takes top, right, bottom or left.

A top sheet spans the full width and is as tall as its content, here just SheetHeader. Cap a long one with a class such as data-[side=top]:max-h-[50vh] and let its body scroll.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. Here it reads Top Sheet, and SheetDescription reads This sheet slides down from the top of the screen.

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, and give people a visible way out instead, such as a Close button in 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.