Overlays · stable · MIT

Sheet

A modal side workflow with configurable logical edge.

Install editable source

Add Sheet

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-sheet.json

Radix UI counterpartnpx shadcn@latest add https://gummyui.dev/r/gummy-radix-sheet.json

Canonical dependency: @base-ui/react. Radix counterpart: @radix-ui/react-dialog. Registry dependencies are resolved automatically.

Behavior contract

Base UI dialog semantics in a side-edge layout.

Tab is contained; Escape closes and restores focus.

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

These public React parts are read directly from the canonical source during the documentation build.

Composes Dialog.Popup.Props & { side?: "left" | "right" | "top" | "bottom"; }

Troubleshooting

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: Tab is contained; Escape closes and restores focus.
If assistive output differs, preserve this semantic foundation: Base UI dialog semantics in a side-edge layout.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Live product source

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Interactive inspection

Resize the canvas, switch its theme, or reverse its reading direction without changing the rest of the page.

Radix UI counterpart

This is the real separately installable Radix source using the same Gummy material and behavior contract.

Editable source

Loading editable source…

Loading editable source…