Linear-style onboarding step indicator
A Linear-style vertical onboarding step indicator for AI websites, apps, and landing pages. Use it to guide users through setup, activation, or feature-discovery flows in any vibe-coded SaaS product. Use this AI template with Replit, Bolt, Lovable, Claude Code, ChatGPT Codex, or any other AI code generator. Copy and use.
About this vibe coding template
A Linear-style vertical onboarding step tracker with three steps connected by a thin line, showing completed steps with a filled checkmark icon and upcoming steps with a numbered placeholder, designed to guide users through product setup or activation with visible progress. Step indicators reduce anxiety during onboarding because they show users exactly where they are and how close they are to finishing. Paste into Bolt, Claude Code, Replit, or Lovable and ask the AI to update the step titles and descriptions to match your product's onboarding sequence.
Common questions about this template
Where in an AI product should onboarding step indicators appear?
Onboarding step indicators work best after the user's first login, during account setup, as a getting-started widget on the main dashboard, or as a sidebar panel in the product. They are most effective when the steps are actionable and completable within the first session.
How do I make the steps interactive so clicking marks them complete?
Ask Bolt, Claude Code, or Replit to make the steps clickable. Tell the AI you want users to be able to mark each step complete by clicking it, and the AI will add the click handlers and update the visual state to show the checkmark.
Can I add a progress percentage above the step list?
Yes. Ask your vibe coding tool to add a completion percentage or count above the step list, like '2 of 3 completed'. Tell the AI you want it to update dynamically as steps are marked complete.
How do I expand this to four or five steps?
Ask Bolt, Claude Code, or Replit to add more steps to the indicator. Tell the AI what the additional step titles and descriptions are and it will extend the list while keeping the connected line and icon design consistent.
Use this AI coding template for
- ·Product onboarding step trackers for AI SaaS and vibe-coded app flows
- ·Setup checklist components for developer tools and AI builder onboarding screens
- ·Three-step activation flows for Bolt, Replit, Claude Code, and Lovable frontends