Composition Gallery

Overlay playground

A focused stress test for modal, contextual, and menu overlays—including a nested overlay and long content.

Overview

Validates focus management, keyboard navigation, layering, scrolling, and return focus using existing Base UI-backed Core primitives.

Use Tab, Enter, Escape, and arrow keys to inspect the Base UI overlay behavior.

1<Dialog title="Long review notes"><Popover trigger={<Button>More context</Button>}>...</Popover></Dialog>

DialogPopoverDropdownMenuTooltipButtonCheckbox

Dialog traps focus and returns it on close; menus support arrow-key navigation; tooltip content is non-essential.

Overlays size within the viewport and dialog body scrolls rather than exceeding available space.

This tests primitives in context. An app command centre or complex workflow drawer remains a future Pro composition.