Wizard Layout
A vertical scaffold for multi-step flows: header with title row + progress, content slot, and a footer for back/next actions.
Connect your battery
Pair the inverter so we can read the live state of charge.
Wizard step content
Usage
import {
WizardLayout,
WizardLayoutDescription,
WizardLayoutFooter,
WizardLayoutHeader,
WizardLayoutHeading,
WizardLayoutTitle,
WizardLayoutTitleRow,
} from '@epilot/spark-ui/wizard-layout'The layout is a thin set of flex containers. None of the parts are interactive. Drop in your own <Progress>, <Button>s, and step content.
<WizardLayout>
<WizardLayoutHeader>
<WizardLayoutHeading>
<WizardLayoutTitleRow>
<WizardLayoutTitle>Connect your battery</WizardLayoutTitle>
<Badge>Step 2 of 4</Badge>
</WizardLayoutTitleRow>
<WizardLayoutDescription>
Pair the inverter so we can read the live state of charge.
</WizardLayoutDescription>
</WizardLayoutHeading>
<Progress value={50} />
</WizardLayoutHeader>
{/* step content */}
<WizardLayoutFooter>
<Button styleVariant="ghost" color="neutral" size="small">
Back
</Button>
<Button>Continue</Button>
</WizardLayoutFooter>
</WizardLayout>API Reference
| Component | Purpose |
|---|---|
WizardLayout | Outer vertical stack |
WizardLayoutHeader | Top section: title row + description + optional progress |
WizardLayoutHeading | Inner stack for the title and description |
WizardLayoutTitleRow | Row with the title on the left and an optional step badge on the right |
WizardLayoutTitle | <h2> heading |
WizardLayoutDescription | Muted <p> description |
WizardLayoutFooter | Bottom action row: typically Back on the left, primary on the right |