SaaS Multi-Step Onboarding Wizard
A guided 4-step onboarding flow for a SaaS product — covering profile setup, team invite, workspace configuration, and a success screen with next steps.
Compatible with:ChatGPTv0Bolt.newCursorGitHub Copilot
Patterns:wizard, form, modal
Prompt
Build a 4-step onboarding wizard for a SaaS project management tool. The wizard should be displayed as a centered modal-ish card on a lightly dimmed or subtle background. **Shell:** - Top: A linear step progress indicator showing steps 1–4 with labels. Completed steps show a checkmark icon. The current step is highlighted in blue. A "Skip for now →" link in the top right. **Step 1 — Set up your profile:** - Heading: "Let's get to know you" - Fields: Full Name, Job Title, Company Name, Company Size (dropdown: 1–10, 11–50, 51–200, 200+) - CTA: "Continue →" **Step 2 — Invite your team:** - Heading: "Bring your team along" - Multi-row email invite input: three email input fields by default with an "+ Add another" link to append more. - Role selector per row: Member / Admin dropdown. - Below inputs: a shareable invite link with a "Copy link" button. - CTA: "Send invites & continue" / "Skip for now →" **Step 3 — Set up your workspace:** - Heading: "Create your first project" - Fields: Project Name (text), Project Type (select: Engineering, Design, Marketing, Operations, Other), Color/icon picker for the project avatar (show 6 swatches). - CTA: "Create project & continue" **Step 4 — You're all set! 🎉** - Full-width confetti animation area (top of card). - Heading: "Your workspace is ready!" - Subtext: "Here's what you can do next:" - Three action tiles (icon + label): "Add your first task", "Invite teammates", "Connect your tools" - CTA: "Go to my dashboard →" Use a white card on a gray/soft background. Blue as primary, generous padding, and friendly micro-copy throughout. The card should be max ~640px wide and centered vertically and horizontally.
Mockdown
[BACKGROUND — gray/soft] ┌────────────────────────────────────────────────────────┐ ← max-w-xl, centered │ Skip for now → │ │ ●──────────●──────────○──────────○ │ │ ✓ Profile ✓ Team → Project ○ Done │ │ ─────────── STEP 1 — PROFILE ─────────────────────── │ │ Let's get to know you │ │ │ │ Full Name [_______________________] │ │ Job Title [_______________________] │ │ Company Name [_______________________] │ │ Company Size [1–10 employees ▾] │ │ │ │ [Continue →] │ │ ─────────── STEP 2 — INVITE TEAM ─────────────────── │ │ Bring your team along │ │ │ │ [sarah@example.com___________] [Member ▾] │ │ [tom@example.com_____________] [Admin ▾] │ │ [_____________________________] [Member ▾] │ │ + Add another │ │ │ │ Invite link: https://app.co/invite/xK92j [Copy] │ │ │ │ [Skip for now →] [Send invites & continue →] │ │ ─────────── STEP 3 — WORKSPACE ────────────────────── │ │ Create your first project │ │ │ │ Project Name [_______________________] │ │ Project Type [Engineering ▾] │ │ Color [🔵][🟢][🟣][🔴][🟡][🟠] │ │ │ │ [Create project & continue →] │ │ ─────────── STEP 4 — SUCCESS 🎉 ───────────────────── │ │ [✨ confetti animation ✨] │ │ Your workspace is ready! │ │ Here's what you can do next: │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ ✅ Add task │ │ 👥 Invite │ │ 🔌 Connect │ │ │ │ │ │ teammates │ │ tools │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ [Go to my dashboard →] │ └────────────────────────────────────────────────────────┘
SaaS Multi-Step Onboarding Wizard
┌───────────────────────────────────────────────┐
│ │
│ Welcome! Let's get started. │
│ │
│ Step: ●────●────●────○────○ │
│ 1 2 3 4 5 │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ What best describes your role? │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ 💻 Developer│ │ 🎨 Designer │ │ │
│ │ └─────────────┘ └─────────────┘ │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ 📊 Manager │ │ 🏢 Founder │ │ │
│ │ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ [ ← Back ] [ Next → ] │
│ │
└───────────────────────────────────────────────┘UI Patterns Used
``` ┌──────────────────────────────────┐ │ Sign Up Form │ ├──────────────────────────────────┤ │ │ │ Email │
Form with Validation
Input form with client-side or server-side validation, displaying error messages and success states
--form--validation--input+3
``` ──────── Testimonials ──────── "Product X helped our team ship faster." — Jane Doe, Acme Co. [Logo Grid] ```
Testimonial / Social Proof
Quotes, logos, and endorsements that build trust and credibility
--testimonial--social-proof--quotes+1
``` ┌─────────────────────────┐ │ ✅ Saved successfully │ (x) └─────────────────────────┘ ```
Toast Notifications
Brief, transient messages for system feedback and status updates
--toast--notifications--alerts+1
Learn more about the UI patterns used in this layout.