Stepper
A set of steps that are used to indicate progress through a multi-step process.
Source code
Click here 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
Introduction
So steppers are weird to add a general style to. I really don't see the point in giving your stepper just one style. It would be more beneficial to look at how other component libraries style their steppers and then just create a custom one that you like with the components provided by Radix Vue.
Untitled UI
Now we will look at how Jordan from Untitled UI styled the steppers in his design system. You can view them here: Steppers - Untitled UI
Stepper with Icon - Horizontal
So here is how I think this should be implemented. Take a look at the source code. Feel free to move things around and try out different things. Of course, you can turn this into a component if you want to.
Your details
Provide your name and email
Company details
A few details about your company
Invite your team
Start collaborating with your team
Stepper with Icon - Vertical
For the vertical variation, this is how I think it should be implemented.
Your details
Provide your name and email address. We will use this information to create your account
Company details
A few details about your company will help us personalize your experience
Invite your team
Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later
Stepper with Top Line
Vuetify
Now our friends over at Vuetify takes a different approach to the whole stepper thing.
Review Order
Ensure your order is correct
Select Shipping
Choose the best shipping option for you
Submit
Complete your order
Order
| Description | Quantity | Price |
|---|---|---|
| Product 1 | 2 | $20.00 |
| Product 2 | 10 | $150.00 |
| Total | $170.00 |