AuthScreen
The page a LoginPanel sits on: the stage, the product lockup above the card, the theme toggle in the corner, and the legal line below.
Component behavior
AuthScreen provides the page background, product branding, theme toggle, and footer around a LoginPanel.
| 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 | Fills the viewport when enabled; otherwise sizes to content. |
children | ReactNode | — | The card. A LoginPanel, usually. |
Examples
A sign-in page
Backgrounds
background defaults to "glow". "grid" adds a fading grid. "plain" omits background effects. "none" omits the stage background.
AuthBrandMark
AuthBrandMark renders a bordered square for logo content. Pass the component to the brand prop of LoginPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 54 | Size of the tile in px. |
children | ReactNode | — | Logo content, such as an image or SVG. |
import { AuthScreen, AuthBrandMark, LoginPanel } from "@solarius/onset";
<AuthScreen background="grid" action={<ThemeToggle />} footer="© 2026 Solarius">
<LoginPanel
brand={
<AuthBrandMark>
<Logo size={40} />
</AuthBrandMark>
}
title="Welcome back"
>
…
</LoginPanel>
</AuthScreen>;