Onboarding Layout
A vertical scaffold for setup wizards: header with title row + progress, content slot, and a footer for back/next actions.
Connect your battery
Step 2 of 4Pair the inverter so we can read the live state of charge.
Onboarding step content
Usage
import {
OnboardingLayout,
OnboardingLayoutDescription,
OnboardingLayoutFooter,
OnboardingLayoutHeader,
OnboardingLayoutHeading,
OnboardingLayoutTitle,
OnboardingLayoutTitleRow,
} from '@epilot/spark-ui/onboarding-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.
<OnboardingLayout>
<OnboardingLayoutHeader>
<OnboardingLayoutHeading>
<OnboardingLayoutTitleRow>
<OnboardingLayoutTitle>Connect your battery</OnboardingLayoutTitle>
<Badge>Step 2 of 4</Badge>
</OnboardingLayoutTitleRow>
<OnboardingLayoutDescription>
Pair the inverter so we can read the live state of charge.
</OnboardingLayoutDescription>
</OnboardingLayoutHeading>
<Progress value={50} />
</OnboardingLayoutHeader>
{/* step content */}
<OnboardingLayoutFooter>
<Button styleVariant="ghost" color="neutral" size="small">
Back
</Button>
<Button>Continue</Button>
</OnboardingLayoutFooter>
</OnboardingLayout>API Reference
| Component | Purpose |
|---|---|
OnboardingLayout | Outer vertical stack |
OnboardingLayoutHeader | Top section: title row + description + optional progress |
OnboardingLayoutHeading | Inner stack for the title and description |
OnboardingLayoutTitleRow | Row with the title on the left and an optional step badge on the right |
OnboardingLayoutTitle | <h2> heading |
OnboardingLayoutDescription | Muted <p> description |
OnboardingLayoutFooter | Bottom action row: typically Back on the left, primary on the right |