Progress Steps

Progress Steps component documentation for Velyx. Installation, usage examples, variants, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Progress Steps

Progress steps give users a high-level view of where they are inside a multi-step flow.

Installation

Add the progress steps component to your project:

npx velyx@latest add progress-steps
pnpm dlx velyx@latest add progress-steps
yarn dlx velyx@latest add progress-steps
bunx --bun velyx@latest add progress-steps

Usage

Default Steps

Progress Steps

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Progress Steps

Full preview from the registry iframe.

Open in tab

Loading preview...

Success Variant

Progress Steps

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Progress Steps

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
steps array [] Ordered steps with optional labels, descriptions, and icons
current int 1 Current step number
variant string 'default' Visual style such as default, success, or blue
showLabels bool true Displays step labels
showDescriptions bool true Displays supporting descriptions
clickable bool false Allows completed steps to be clicked
size string 'md' Size preset: sm, md, or lg

Example Structure

<x-ui.progress-steps
    :steps="[
        ['label' => 'Account', 'description' => 'Create workspace'],
        ['label' => 'Project', 'description' => 'Define structure'],
        ['label' => 'Launch', 'description' => 'Ship to production'],
    ]"
    :current="2"
/>

Next Steps