← Back to docs
Recipe: Progress step indicator design
A horizontal step indicator built with Tailwind CSS. Each step shows done, active, or pending state with connecting lines.
Usage
Map each step to a status: done, active, or pending. The connecting line inherits the done color from the preceding step. Active steps use the pink accent ring; completed steps show a violet checkmark.