Steps
@xui/stepsA step / wizard progress indicator. Bind current to the active index; each step's status (finish / process / wait) is derived automatically, or overridden per step. clickable lets the user jump between steps.
Install
pnpm add @xui/steps Add the barrel to a standalone component's imports:
import { XuiStepsImports } from '@xui/steps';
@Component({
imports: [XuiStepsImports],
// …
})Examples
Horizontal
Loading preview…
<div class="flex w-[640px] flex-col gap-6">
<xui-steps [(current)]="current" clickable>
<xui-step title="Cart" description="Review items" />
<xui-step title="Payment" description="Card or PayPal" />
<xui-step title="Confirm" description="Place order" />
</xui-steps>
<div class="flex gap-2">
<button xuiButton (click)="current = current - 1" [disabled]="current === 0">Back</button>
<button xuiButton color="primary" (click)="current = current + 1" [disabled]="current === 2">Next</button>
</div>
</div>With error
Loading preview…
<xui-steps [current]="1" class="w-[560px]">
<xui-step title="Uploaded" />
<xui-step title="Processing" status="error" description="Conversion failed" />
<xui-step title="Published" />
</xui-steps>Vertical
Loading preview…
<xui-steps [current]="2" orientation="vertical" class="w-[320px]">
<xui-step title="Account created" description="2026-07-01" />
<xui-step title="Profile completed" description="2026-07-03" />
<xui-step title="First project" description="In progress" />
<xui-step title="Invite team" />
</xui-steps>API
One step inside {@link XuiSteps}. title/description describe it; status overrides the status the parent would otherwise derive from current.
Inputs
titlestringThe step's name, shown beside its marker.''descriptionstringSupporting detail under the title.''statusXuiStepStatusForce a status instead of deriving it from the active step.A step / wizard progress indicator. Wrap <xui-step> entries and bind current (two-way) to the active index; each step's status is derived (finish before, process at, wait after) unless the step overrides it. With clickable, clicking a step moves current.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''currentnumberZero-based index of the active step. Everything before it reads as done, everything after as pending. Two-way bindable.0orientation'horizontal' | 'vertical'Run the steps across the page or down it.this.config.orientationclickablebooleanLet a step header jump to that step. Off by default, so the sequence stays under the host's control.this.config.clickable