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