Steps

A progress indicator for multi-step flows. Each <li class="step"> gets an auto-numbered circle. Add a color class like step-primary to mark completed steps. Use data-content to replace the number with a custom character.

Basic

Four steps — first two completed (filled), last two pending.

steps

Register
Choose plan
Purchase
Receive product

Colors

Steps support all DaisyUI semantic color tokens.

steps colors

neutral

Step 1
Step 2
Step 3
Step 4

primary

Step 1
Step 2
Step 3
Step 4

secondary

Step 1
Step 2
Step 3
Step 4

accent

Step 1
Step 2
Step 3
Step 4

info

Step 1
Step 2
Step 3
Step 4

success

Step 1
Step 2
Step 3
Step 4

warning

Step 1
Step 2
Step 3
Step 4

error

Step 1
Step 2
Step 3
Step 4

Custom content

Use data-content to replace the auto-number with any single character — a checkmark, question mark, star, etc.

steps data-content

Details
Payment
Review
Confirm

Vertical

Pass vertical to stack steps top-to-bottom.

steps vertical

Create account
Verify email
Set up profile
Add payment method
Go live

With descriptions

Add secondary text below the step label using a nested <p> inside the <li>.

steps with descriptions

Register
Create your account
Choose plan
Pick what fits
Purchase
Complete payment
Receive product
Enjoy your order

Checkout flow

Real-world example: an e-commerce checkout progress indicator with a mix of completed, current, and upcoming steps.

steps checkout

Cart
Shipping
Payment
Review
Done

Payment details

Step 3 of 5 — Enter your card information below.

Many steps (scrollable)

When there are many steps, wrap in an overflow-x-auto container.

steps scrollable

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
Step 8
Step 9
Step 10