Back to cookbook
Recipe

Onboarding flow with 3 steps

You need a multi-step onboarding modal: pick role → invite team → connect tools.

Recommended:
Claude
Cursor

Prompt

Use @gunjo/ui. Reference https://gunjo.dev/api/specs/overlay/onboarding-flow and https://gunjo.dev/api/specs/feedback/stepper.

Build a 3-step onboarding wizard centered on screen:
- Stepper at top showing current step (Pick role → Invite team → Connect tools)
- Step 1: RadioGroup with 3 options (Designer / Engineer / PM). Each option has an Icon, label, and 1-line description.
- Step 2: TagInput for inviting team members (paste comma-separated emails)
- Step 3: 4 Cards for tools (Slack / GitHub / Linear / Notion) — each with Switch to toggle.
- Bottom right: "Back" (variant=outline) + "Continue" (bg-primary). Final step: "Finish".

Persist state across steps. Disable Continue if required field empty.

Expected output

An onboarding wizard using Stepper, RadioGroup, TagInput, Card, Switch, Button.

Components used

OnboardingFlow
Stepper
RadioGroup
TagInput
Card
Switch