Stepper

Stepper component documentation for Velyx. Installation, horizontal and vertical usage examples, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Stepper

Steppers combine progress and content structure for guided, multi-step experiences.

Installation

Add the stepper component to your project:

npx velyx@latest add stepper
pnpm dlx velyx@latest add stepper
yarn dlx velyx@latest add stepper
bunx --bun velyx@latest add stepper

Alpine.js Required: The stepper component uses Alpine.js to manage the current step and optional navigation.

Usage

Horizontal Stepper

Stepper

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Stepper

Full preview from the registry iframe.

Open in tab

Loading preview...

Vertical Stepper

Stepper

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Stepper

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
steps array [] Ordered step definitions
currentStep int 1 Currently active step
variant string 'horizontal' Layout orientation: horizontal or vertical
size string 'md' Size preset
showNumbers bool true Shows numeric indicators when no icon is provided
clickable bool false Allows navigating back to completed steps

Next Steps