Progress Steps

Powerful and customizable progress step components for multi-step forms, onboarding flows, and process visualization.

Installation

import { ProgressSteps } from "@/components/ui/progress-steps";

Examples

Below are examples and variations of the progress steps component:

Icon Left - Vertical Layout

Vertical progress steps with radio icons and connectors, ideal for sidebar navigation.

<ProgressSteps
    steps={steps}
    currentStep={1}
    type="icon-left"
    size="sm"
/>

Icon Top - Horizontal Layout

Horizontal progress steps with icons on top, perfect for multi-step forms.

<ProgressSteps
    steps={steps}
    currentStep={1}
    type="icon-top"
    size="md"
/>

Number Left - Vertical with Numbers

Numbered steps in vertical layout with dotted connectors.

<ProgressSteps
    steps={steps}
    currentStep={2}
    type="number-left"
    size="sm"
/>

Number Top - Horizontal with Numbers

Numbered steps in horizontal layout.

<ProgressSteps
    steps={steps}
    currentStep={0}
    type="number-top"
    size="md"
/>

Featured Icon Left - With Custom Icons

Vertical layout with featured icons and connectors.

import { User01, Building01, Users, Share01 } from "@untitled-ui/icons-react";

const stepsWithIcons = [
    { id: "1", title: "Your details", description: "...", icon: User01 },
    { id: "2", title: "Company details", description: "...", icon: Building01 },
    // ...
];

<ProgressSteps
    steps={stepsWithIcons}
    currentStep={1}
    type="featured-icon-left"
    size="sm"
/>

Featured Icon Top - Horizontal with Icons

Horizontal layout with large featured icons.

<ProgressSteps
    steps={stepsWithIcons}
    currentStep={2}
    type="featured-icon-top"
    size="md"
/>

Text Line - Minimal Layout

Simple horizontal layout with colored top borders indicating progress.

<ProgressSteps
    steps={steps}
    currentStep={1}
    type="text-line"
    size="sm"
/>

Without Connectors

Horizontal layouts can hide connectors for a cleaner look.

<ProgressSteps
    steps={steps}
    currentStep={1}
    type="icon-top"
    size="md"
    showHorizontalConnector={false}
/>

Interactive Steps

Clickable steps that allow navigation through the process.

Your details

Please provide your name and email

Step 1 of 4

function MyForm() {
    const [currentStep, setCurrentStep] = React.useState(0);

    return (
        <div>
            <ProgressSteps
                steps={steps}
                currentStep={currentStep}
                type="icon-left"
                onStepClick={(index) => setCurrentStep(index)}
            />
            
            {/* Your step content */}
            <div className="mt-8 p-6 bg-secondary rounded-lg">
                <h3>{steps[currentStep].title}</h3>
                <p>{steps[currentStep].description}</p>
            </div>

            {/* Navigation buttons */}
            <div className="flex gap-4 mt-6">
                <button 
                    onClick={() => setCurrentStep(prev => Math.max(0, prev - 1))}
                    disabled={currentStep === 0}
                >
                    Previous
                </button>
                <button 
                    onClick={() => setCurrentStep(prev => Math.min(steps.length - 1, prev + 1))}
                    disabled={currentStep === steps.length - 1}
                >
                    Next
                </button>
            </div>
        </div>
    );
}

Size Variants

Progress steps come in two sizes: sm and md.

Size: sm

Size: md

// Small
<ProgressSteps size="sm" {...props} />

// Medium
<ProgressSteps size="md" {...props} />

API Reference

ProgressSteps

Prop	Type	Default	Description
steps	StepData[]	-	Array of step data objects
currentStep	number	-	Current active step index (0-based)
type	"icon-left" \| "icon-top" \| "number-left" \| "number-top" \| "featured-icon-left" \| "featured-icon-top" \| "text-line"	-	Layout and style variant
size	"sm" \| "md"	"sm"	Size of indicators and text
showHorizontalConnector	boolean	true	Show/hide connector lines between steps (applies to horizontal layouts)
onStepClick	(index: number) => void	-	Callback when a step is clicked

StepData

Property	Type	Description
id	string	Unique identifier for the step
title	string	Step title
description	string	Optional step description
icon	FC \| ReactNode	Icon component (for featured-icon variants)