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.

OnboardingMediumsaas
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

Learn more about the UI patterns used in this layout.