Stepper
A vertical stepper component that displays a sequence of steps with automatic numbering and visual connections between steps. Perfect for multi-step processes, tutorials, or guided workflows.
Usage
Wrap Markdown lists with the Stepper component to create a vertical stepper like this:
<Stepper> 1. **Identify the Problem** 1. **Plan Your Project** 1. **Build Your Solution** 1. **Test and Deploy** </Stepper>tsx
- Identify the Problem
- Plan Your Project
- Build Your Solution
- Test and Deploy
Advanced Example
-
Identify the Problem
Begin by identifying the problem you're trying to solve. This foundational step ensures you're building the right solution for your needs.
-
Plan Your Project
Define your project requirements and goals. This ensures you're building the right solution for your needs.
Make sure you have gathered all the information you need before you start planning your project.
-
Build Your Solution
With a solid plan in place, start implementing your solution. Break down complex tasks into manageable pieces and track your progress.
- Create component structure
- Implement core functionality
- Add styling and polish
-
Test and Deploy 🚀
pnpm build pnpm test pnpm deploy --prod
sh
See Markdown for example above 👆
<Stepper> 1. **Identify the Problem** Begin by identifying the problem you're trying to solve. This foundational step ensures you're building the right solution for your needs. 1. **Plan Your Project** Define your project requirements and goals. This ensures you're building the right solution for your needs. :::info Make sure you have gathered all the information you need before you start planning your project. ::: 1. **Build Your Solution** With a solid plan in place, start implementing your solution. Break down complex tasks into manageable pieces and track your progress. - Create component structure - Implement core functionality - Add styling and polish 1. **Test and Deploy** 🚀 ```sh pnpm build pnpm test pnpm deploy --prod ``` </Stepper>