Laravel Steps Component

Pro

Step indicator for multi-step workflows, showing progress through sequential stages with status and icons.

A Steps built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::steps>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Steps is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::steps>
    <x-aura::steps.step title="Account" status="completed" />
    <x-aura::steps.step title="Profile" status="current" />
    <x-aura::steps.step title="Review" status="pending" />
</x-aura::steps>

See the full API, props and live examples in the Steps documentation.

Overview

The Steps component displays a visual progress indicator for multi-step processes such as checkout flows, onboarding wizards, or registration forms. Each step shows its title, optional description, and current status (pending, current, completed). Steps are connected by visual lines that reflect progress.

Props

Steps

Prop	Type	Default	Description
`current`	`int`	`0`	Index of the currently active step (used with Alpine.js for dynamic navigation).
`variant`	`string`	`'horizontal'`	Layout direction: `horizontal` or `vertical`.
`clickable`	`bool`	`false`	Allow clicking on steps to navigate.
`size`	`string`	`'md'`	Size variant: `sm`, `md`, `lg`.

Steps Step

Prop	Type	Default	Description
`title`	`string`	`''`	Step heading text (alias: `label`).
`description`	`string`	`''`	Optional description shown below the title.
`step`	`int`	`0`	Zero-based step index (determines number displayed and status via parent's `current`).
`status`	`string\|null`	`null`	Explicit status override: `pending`, `current`, or `completed`. When set, renders server-side without Alpine.
`icon`	`string\|null`	`null`	Custom icon name. Defaults to a checkmark for completed and a number for others.