Stage
Full-bleed page background that a single card sits on, such as a sign-in panel, a first-run wizard, or a welcome screen.
Component behavior
Stage provides a centered page layout with a configurable background. children supplies page content, such as a LoginPanel or Wizard.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "main" | Root element or component. Use div when this is not the main page region. |
brand | ReactNode | — | Brand content above the card. |
action | ReactNode | — | Corner slot, pinned top-right. A ThemeToggle, a locale picker. |
footer | ReactNode | — | Footer content below the card. |
background | "glow" | "grid" | "plain" | "none" | "glow" | The stage. glow is the brand wash; grid adds a ruled lattice that fades out behind the card. |
fullHeight | boolean | true | Sets flex: 1 and a viewport minimum height. False sizes the stage to its content. |
children | ReactNode | — | The card. |
Examples
A card on a stage
Backgrounds
Use glow as the default, grid for public-facing screens, plain when the brand hue appears elsewhere on the page, and none inside a surface that already has its own background.
import { Stage, Wizard } from "@solarius/onset";
<Stage background="glow">
<Wizard
steps={steps}
layout="rail"
bordered
elevation="dialog"
style={{ width: "min(1060px, 92vw)", height: "min(760px, 88vh)" }}
/>
</Stage>;