UI Thing

Stepper

A set of steps that are used to indicate progress through a multi-step process.

Reka UI
API Reference

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add stepper

Origin UI

Step 2 of 0

Stepper with numbers only

Step 2 of 0

Stepper with numbers and checkmarks

Step 2 of 0

Stepper with tiny buttons and checkmarks

1
2
3
4
Step 2 of 0

Controlled stepper with checkmarks

1
2
3
4
Step 2 of 0

Controlled stepper with checkmarks and loading state

Step 2 of 0

Stepper with mixed elements

Step 2 of 0

Stepper with labels

1
2
3
4
Step 2 of 0

Paginated stepper

1
2
3
4
Step 2 of 0
Step 2 of 4

Progress stepper

Step 2 of 0

Stepper with titles and descriptions

Step 2 of 0

Stepper with inline titles

Step 2 of 0

Stepper with inline titles and descriptions

Step 2 of 0

Stepper with inline titles and descriptions

Step 2 of 0

Vertical stepper with numbers and checkmarks

1
2
3
4
Step 2 of 0

Controlled vertical stepper with checkmarks

Step 2 of 0

Vertical stepper with inline titles

Step 2 of 0

Vertical stepper with inline titles and descriptions

Splitter

A component that divides your layout into resizable sections.

Switch

A control that allows the user to toggle between checked and not checked.