StyleOverlay

Updated: May 9, 2025

StyleOverlay renders a toggleable panel designed for accessing Once UI styling properties in a compact way during development. The panel slides out from the corner of the screen and overlays content.

StyleOverlay

<StyleOverlay>
  <Row paddingTop="8" paddingRight="12">
    <IconButton icon="sparkle" />
  </Row>
</StyleOverlay>

Trigger

Set any element as trigger for the overlay in the children prop.

Trigger

Open

<StyleOverlay>
  <Row paddingTop="8" paddingRight="12">
    <Button>Open</Button>
  </Row>
</StyleOverlay>

Behavior

The overlay appears in the top-right corner.
Internally uses StylePanel as content which can be customized with Flex props.
Automatically clamps height using safe spacing constraints.
Contains close and trigger buttons with consistent z-index stacking and conditional rendering.

API reference

Prop	Type	Default
iconButtonProps Props forwarded to the trigger icon button.	Partial<React.ComponentProps<typeof IconButton>>	—
children	React.ReactNode	—
zIndex	DisplayProps["zIndex"]	2
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

ComponentsStatusIndicator

ComponentsStylePanel

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club