Data displayReact Native

Backdrop

Place a token-aware ambient pattern behind native application content.

Public APILumenBackdropReact Native

Native example

Use Backdrop

Use behind meaningful hero, empty-state, or highlighted content. Keep child surfaces and text on semantic tokens so contrast does not depend on the decoration.

View verified React Native runtime capture

Backdrop rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenBackdrop intensity="medium" variant="aurora">
  <ProjectOverview />
</LumenBackdrop>

Reference

Public API

The primary shared and platform-specific options exposed by LumenBackdrop.

API	Values or type	Default	Description
variant	`aurora · dots · grid · rays`	`aurora`	Selects the ambient pattern.
tone	`brand · accent · neutral`	`brand`	Selects the semantic decoration color.
intensity	`subtle · medium · strong`	`medium`	Controls only the decoration opacity.
content	`Native view content`	`Required`	Renders meaningful content above the decorative layer.

Native behavior

Design and accessibility

When to use it

Use behind meaningful hero, empty-state, or highlighted content. Keep child surfaces and text on semantic tokens so contrast does not depend on the decoration.

Accessibility

The ambient layer has no accessibility semantics; child content keeps its native reading order, names, and controls.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose