bladewindui/stepper

BladewindUI - accessible Stepper and Wizard component

Maintainers

Package info

github.com/bladewindui/stepper

Language:CSS

pkg:composer/bladewindui/stepper

Transparency log

Statistics

Installs: 1

Dependents: 1

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

v5.0.0 2026-08-29 22:31 UTC

Requires

MIT 1261ab2d420e2127527d372c04a7f0f39ca04d5f

  • Michael K. Ocansey <mike.woop@bladewindui.com>

wizardnavigationlaravelbladetailwindcssstepperbladewindui

Published on Packagist.org on 2026-08-29 23:31 UTC

This package is auto-updated.

Last update: 2026-08-29 23:31:50 UTC

README

License Packagist Version

BladewindUI

Stepper

Accessible horizontal and vertical progress indicators and multi-step wizards for Laravel Blade applications.

Installation

composer require bladewindui/stepper

The Navigation bundle also includes Stepper:

composer require bladewindui/navigation

Usage

<x-bladewind::stepper name="setup" current="profile" style="circles" linear="true" aria-label="Account setup">
    <x-bladewind::stepper.item name="account" label="Account" state="complete" />
    <x-bladewind::stepper.item name="profile" label="Profile" description="Personal details" />
    <x-bladewind::stepper.item name="security" label="Security" />

    <x-bladewind::stepper.content name="account">Account form</x-bladewind::stepper.content>
    <x-bladewind::stepper.content name="profile" has-border="false">Profile form</x-bladewind::stepper.content>
    <x-bladewind::stepper.content name="security">Security form</x-bladewind::stepper.content>
</x-bladewind::stepper>

Navigate with showStepperStep(name, step), nextStepperStep(name), previousStepperStep(name), and resetStepper(name). Listen for the cancelable bladewind:stepper:before-change event to validate a step. Successful changes emit bladewind:stepper:changed; advancing beyond the last enabled step emits bladewind:stepper:complete.

The root current prop is the canonical initial selection and takes precedence over a conflicting item state="current" value.

Choose circles, chevrons, bars, or line with the root style prop. The default is circles. Every style uses the same states, content panels, navigation helpers, events, keyboard behavior, and accessibility semantics.

circles, bars, and line support horizontal and vertical orientation. chevrons is horizontal-only; a vertical Chevron request falls back to circles.

Content panels have a border by default. Set has-border="false" on stepper.content when another component, such as Card, provides the visible content surface.

Documentation

Full documentation and live examples are at bladewindui.com/component/stepper.

License

MIT. See the LICENSE file.