Primitive

Overlay

Generic overlay stack for dialog, drawer, and popover presentation.

Overlay owns stack placement and scrim policy. Dialog, drawer, and picker surfaces own the panel shape inside it.
surface
DOM renderImage render
OverlayDefault

Inline overlay

Overlay children own their surface.
Ready

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Inline overlay placement primitive.

Inline overlay

Overlay children own their surface.
Ready
Render state

Fixed

Fixed overlay stack with scrim policy.

Fixed overlay

Dialog surface slot
Render state

Stretch

Stretch placement for drawer-like surfaces.

Drawer overlay

Full-height slot
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
presentation'inline' | 'fixed'-Overlay positioning context.
placement'center' | 'start' | 'end' | 'stretch'-Child placement inside the stack.
scrimboolean-Whether to render scrim treatment.
childrenReactNode-Overlay content.