Steps

Steps can be used to show a list of steps in a process.

Class name	Type
steps	Component	Container of step items
step	Component	A step item
step-primary	Modifier	Adds `primary` color to step
step-secondary	Modifier	Adds `secondary` color to step
step-accent	Modifier	Adds `accent` color to step
step-info	Modifier	Adds `info` color to step
step-success	Modifier	Adds `success` color to step
step-warning	Modifier	Adds `warning` color to step
step-error	Modifier	Adds `error` color to step
steps-vertical	Responsive	makes `steps` vertical
steps-horizontal	Responsive	makes `steps` horizontal

# Horizontal

Register
Choose plan
Purchase
Receive Product

# Vertical

Register
Choose plan
Purchase
Receive Product

# responsive (vertical on small screen, horizontal on large screen)

Register
Choose plan
Purchase
Receive Product

# With data-content

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

# Custom colors

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

# With scrollable wrapper

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

Prev Pagination

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective

Edit this page on GitHub

Sponsors

Make your React site visually editable

Become a sponsor

Sponsors

Make your React site visually editable

Become a sponsor