Laravel Stepper Component

Free · MIT

Progress through a multi-step flow, showing what is done, what is current and what remains.

A Stepper built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::stepper>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::stepper :active="2">
    <x-aura::stepper.step label="Account" />
    <x-aura::stepper.step label="Billing" />
    <x-aura::stepper.step label="Confirm" />
</x-aura::stepper>

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

Overview

<x-aura::stepper> shows where the user is in a sequence — checkout, onboarding, a wizard — and how much is left. Each step is a <x-aura::stepper.step>; the parent decides which one is active and styles the rest accordingly.

Props

Prop	Type	Default	Description
`active`	`int`	`1`	The current step, counting from 1.
`orientation`	`string`	`'horizontal'`	`horizontal` or `vertical`.
`size`	`string`	`'md'`	`sm`, `md`, `lg`.
`connectors`	`bool`	`true`	Draw the lines between the steps.

Step

Prop	Type	Default	Description
`label`	`string`	`''`	The step name.
`description`	`string\|null`	`null`	A short line under the label.
`icon`	`string\|null`	`null`	Icon shown instead of the step number.