onboarding pattern

Team invite

Invite teammates by email. Optional during onboarding.

When to use it

After profile setup, before plan selection. Encourage workspace creation.

  • Up to 10 invites in <60s
  • Skippable
  • Detect company domain to suggest invitees

Layout regions

  • header
  • card

States

  • default
  • partial
  • loading
  • success
  • error

Example

<Card><CardHeader><CardTitle>Invite your team</CardTitle></CardHeader><CardContent><Input placeholder="teammate@example.com" /><Stack variant="row">{invites.map((e) => <Tag onRemove={remove}>{e}</Tag>)}</Stack><Button>Send invites</Button></CardContent></Card>

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

Build the Team invite pattern in your project.