Account onboarding card
Responsive multi-step account onboarding card with profile details, email verification, workspace setup, optional team invitations, progress, validation, back navigation, and completion states.
SaaS onboarding flow
Guide new users from signup to their first useful result, with each step shown on its own screen.
26available designs
The complete flow
A goal-led setup flow that connects tools, shows progress, and ends with a clear first project state.
- Choose a goal
- Connect the required tools
- Show durable progress
- Hand off to the first project
See the direction before you build
Every result opens into responsive light and dark previews, editable source, implementation details, and related designs.
App tour tooltip
Inline app-tour step blueprint with a highlighted target, coach-mark card, step 2 of 5 badge, and progress dots.
Checklist widget
Corner card onboarding widget with a progress ring, five setup tasks, two complete, the next step highlighted, and an honest dismiss note.
Choose plan step
Three plan cards with real limits stated, Free preselected, and a no sales call promise for Team.
Connect source card
Four source tiles including a no engineering CSV option and a read only credentials promise in the footer.
Connect tools step
Onboarding integrations step with Slack, GitHub, Calendar, and Drive tiles showing one pre-connected state.
Data source status
Onboarding panel showing three data source connection rows with connected, connecting, and failed states including an actionable error and continue-anyway link.
Feature spotlight blueprint
Static open-state coach-mark that highlights a new bulk-actions toolbar with a callout card, New badge, and a Got it dismiss button.
Finish setup card
Setup complete card with a personalized header, a three item onboarding recap, and a single suggested next action.
First project empty state
Day one empty dashboard with two create paths, a three step next preview, and a sample project offer.
Goal selection step
Onboarding step with four goal tiles that order the sidebar, one pre-selected, and a note that every feature stays available regardless of the choice.
Import data step
Onboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.
What makes it distinctive
The flow is organized around reaching the first useful outcome, not a sequence of account questions with no visible payoff.
Where it works
SaaS apps that need several setup decisions, integrations, or workspace choices before the app becomes useful.
Direction for your coding agent
Keep each step resumable, expose progress honestly, and store completion in the host application. Never infer that an external connection succeeded.