Steps

Name: Rad UI
Author: Rad UI Team

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

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
currentStep	number	0
orientation	enum	horizontal
className	string	""