StepList
A numbered sequence of steps, each with a title, a line of body text and an optional control. Done steps show a check.
Examples
Setup steps in a Card
The empty-account Overview. The first step is done, so it shows a check and loses its button.
Light
<Card>
<CardHeader title="Get set up" description="…" />
<CardBody>
<StepList
steps={[
{ title: 'Add a server', body: 'Paste the URL of any MCP server.', done: true },
{ title: 'Connect your agent', body: '…', aside: <Button size="sm" variant="secondary" href="/dashboard/connect">Connection guides</Button> },
{ title: 'Make a first call', body: 'Ask your agent to use a tool.' },
]}
/>
</CardBody>
</Card>Usage
import { StepList } from '@switchboard/ui'
<StepList steps={[{ title, body?, aside?, done? }]} />Props
Every component also takes mix, for css() and mixins applied after its own style.
StepList
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | { title; body?; aside?: RemixNode; done?: boolean }[] | – | The steps, in order. |
| level | 3 | 4 | 3 | Heading level of each step title. |
Also accepts every <ol> attribute.
CardHeader (icon)
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | IconName | – | Accent icon in front of the title: the one colour on a neutral card (Overview "Connect your agent"). |
SidebarSection (pinned)
| Prop | Type | Default | Description |
|---|---|---|---|
| pinned | 'bottom' | – | Pushes the section to the foot of the sidebar nav, with a hairline above (Settings). |
Accessibility
- An <ol>, so screen readers announce the count and position; the visible number is aria-hidden.
- Done steps add a visually hidden "(done)" to the title; the check is never the only signal.
Guidance
Do
- Use it for a real sequence, where order matters.
- Keep one control per step, on the step it belongs to.
Don’t
- Use it for an unordered feature list (use a Grid of Cards).
- Show 0-value stats next to it on an empty account.