onboarding pattern

Profile setup

Optional profile completion: name, avatar, role, timezone.

When to use it

User signed up via OAuth or email-only — fill missing optional fields.

  • Optional fields filled in <30s
  • Skippable at any point
  • Avatar capture is fast

Layout regions

  • header
  • card

States

  • default
  • loading
  • success

Example

<Card><CardHeader><CardTitle>Tell us a bit about you</CardTitle></CardHeader><CardContent><Form><FileUpload variant="avatar" /><Field label="Full name"><Input defaultValue={oauthName} /></Field><Button type="submit">Continue</Button></Form></CardContent></Card>

The full Profile setup pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Profile setup pattern in your project.