Steps

Progress indicators for multi-step workflows

Layout

Horizontal Layout

Preview Code Auto

Register
Choose plan
Purchase
Receive Product

Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps'
)

Vertical Layout

Preview Code Auto

Register
Choose plan
Purchase
Receive Product

Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical'
)

Responsive Layout

Preview Code Auto

Register
Choose plan
Purchase
Receive Product

Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical lg:steps-horizontal'
)

Content

Custom Markers

Steps with custom data-content

Preview Code Auto

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7

Ul(
    Li('Step 1', data_content='?', cls='step step-neutral'),
    Li('Step 2', data_content='!', cls='step step-neutral'),
    Li('Step 3', data_content='✓', cls='step step-neutral'),
    Li('Step 4', data_content='✕', cls='step step-neutral'),
    Li('Step 5', data_content='★', cls='step step-neutral'),
    Li('Step 6', data_content='', cls='step step-neutral'),
    Li('Step 7', data_content='●', cls='step step-neutral'),
    cls='steps'
)

Custom Colors

Preview Code Auto

Fly to moon
Shrink the moon
Grab the moon
Sit on toilet

Ul(
    Li('Fly to moon', cls='step step-info'),
    Li('Shrink the moon', cls='step step-info'),
    Li('Grab the moon', cls='step step-info'),
    Li('Sit on toilet', data_content='?', cls='step step-error'),
    cls='steps'
)

Advanced

Scrollable Steps

Preview Code Auto

start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
end

Div(
    Ul(
        Li("start", cls="step"),
        Li("2", cls="step step-secondary"),
        Li("3", cls="step step-secondary"),
        Li("4", cls="step step-secondary"),
        Li("5", cls="step"),
        Li("6", cls="step step-accent"),
        Li("7", cls="step step-accent"),
        Li("8", cls="step"),
        Li("9", cls="step step-error"),
        Li("10", cls="step step-error"),
        Li("11", cls="step"),
        Li("12", cls="step"),
        Li("13", cls="step step-warning"),
        Li("14", cls="step step-warning"),
        Li("15", cls="step"),
        Li("16", cls="step step-neutral"),
        Li("17", cls="step step-neutral"),
        Li("18", cls="step step-neutral"),
        Li("19", cls="step step-neutral"),
        Li("20", cls="step step-neutral"),
        Li("21", cls="step step-neutral"),
        Li("22", cls="step step-neutral"),
        Li("23", cls="step step-neutral"),
        Li("end", cls="step step-neutral"),
        cls="steps"
    ),
    cls="overflow-x-auto"
)

Class Reference

Class	Type	Description
steps	Component	Container of multiple step nodes
step	Part	Individual step item
step-icon	Part	Custom icon inside step
step-primary	Color	Primary color variant
step-secondary	Color	Secondary color variant
step-accent	Color	Accent color variant
step-neutral	Color	Neutral color variant
step-info	Color	Info color variant
step-success	Color	Success state indicator
step-warning	Color	Warning state indicator
step-error	Color	Error state indicator
steps-vertical	Direction	Makes steps vertical (default)
steps-horizontal	Direction	Makes steps horizontal

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo