Onboarding progress banner template for SaaS

What does this onboarding progress banner template include?

A numbered step badge, a short label naming the current task, a progress bar filling proportionally to setup completion, two CTA buttons for the next action and the full checklist, and a dismiss control on the right side.

How is this progress banner different from the onboarding progress card in the library?

The onboarding progress card is a dashboard widget that sits on the home screen and is visible only when the user is on the overview page. The progress banner is a persistent full width strip that stays visible on every route in the app until the team dismisses it or completes setup. Use the banner when setup progress should stay visible even when the user navigates away from the dashboard.

Where does the progress banner sit in the page layout?

The banner sits between the main navigation ribbon and the app layout, spanning the full width. It is not a floating overlay. Place it in the layout template so it appears on every route without duplicating it in each page file.

Which templates does this banner pair with?

The progress banner pairs with the dashboard overview template, which shows KPI tiles and an activity feed, and with the activation checklist, which expands the full setup sequence in a panel on the home screen. The banner keeps the current step and progress visible wherever the user navigates; the checklist shows all steps in detail on the overview.

Which tools work with this onboarding progress banner template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and replace the step label, progress bar width, CTA targets, and dismiss behavior with your own setup sequence.