Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best steps components?
Describe the workflow stages. List the step names and identify the current, completed, and upcoming stages. Tell the AI whether the component indicates progress or provides instructions for each stage.
Choose a direction. Specify a horizontal tracker, a vertical sequence, or another suitable structure. Ask for clear state indicators and explain how much supporting text each step needs.
Review progress states. Compare the first, middle, and final stages. Check long labels on mobile and make sure users can understand their position without relying only on color.
Examples of steps components
Dashy
Onboarding Step Card: Choose A Product
A single white rounded card showing a step indicator (01 of 06) above a bold heading and a short helper sentence. It appears to be one step of a multi-step onboarding or setup flow, with no visible inputs or buttons.
Vendia
Three-Step Checkout Progress Indicator
A horizontal checkout progress indicator showing three numbered steps: Shopping Cart, Payment & Delivery Options, and Order Received. The first step is highlighted with a bright yellow-green numbered circle, while the remaining steps use dark gray circles, with arrow connectors between them.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
