Steps

A multi-step progress indicator. Compose with Root, Item, Track, Bubble, Line, Content, Title, and Description for full control.

View component changelog

preview

Account Setup

Create your account and verify your email

Profile

Add your personal information

Payment

Set up your billing details

Confirmation

Review and complete registration

React
"use client"

import Steps from "@radui/ui/Steps"

const steps = [
    { title: 'Account Setup', description: 'Create your account and verify your email' },
    { title: 'Profile', description: 'Add your personal information' },
    { title: 'Payment', description: 'Set up your billing details' },
    { title: 'Confirmation', description: 'Review and complete registration' }
]

const StepsExample = () => {
    return (
        <Steps.Root>
            {steps.map((step, index) => (
                <Steps.Item key={index} value={index}>
                    <Steps.Track>
                        <Steps.Bubble>{index + 1}</Steps.Bubble>
                        <Steps.Line />
                    </Steps.Track>
                    <Steps.Content>
                        <Steps.Title>{step.title}</Steps.Title>
                        <Steps.Description>{step.description}</Steps.Description>
                    </Steps.Content>
                </Steps.Item>
            ))}
        </Steps.Root>
    )
}

export default StepsExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Steps from "@radui/ui/Steps"

export default () => {
    return (
        <Steps.Root>
            <Steps.Item value={0}>
                <Steps.Track>
                    <Steps.Bubble />
                    <Steps.Line />
                </Steps.Track>
                <Steps.Content>
                    <Steps.Title />
                    <Steps.Description />
                </Steps.Content>
            </Steps.Item>
        </Steps.Root>
    )
}

Root

The root Steps component.

Prop	Type	Default
value	number	--
defaultValue	number	0
onValueChange	(value: number) => void	--
orientation	enum	vertical
className	string	""
asChild	boolean	false

Edit this page on GitHub →