UI Invite Accept Catalog

Five complete invite journeys — Invite email → Join team → Set password/profile → Land in app — with working step transitions. Unlike the isolated card in ui/auth/, each pattern here is a navigable end-to-end flow. See CATALOG.md for recipes.

.invflow-classic

Classic Stepper

Full-width card with horizontal Invite · Join · Profile · App progress and Back / Continue.

  1. Invite
  2. Join
  3. Profile
  4. App

From Maya Chen · Harbor Studio

You’re invited to Harbor Studio

Maya invited you as a Guide. Accept to join the Northstar workspace.

Harbor Studio Invited by Maya Chen · Guide role

Sent to [email protected]

.invflow-split

Split Sticky Context

Left stepped form; right sticky workspace preview + stage checklist. Stacks on narrow.

  1. Invite
  2. Join
  3. Profile
  4. App

Your invitation

[email protected]

Join Harbor Studio on Northstar

Open this invite to claim your Guide seat. Expires in 7 days.

.invflow-accordion

Accordion Journey

Single page with four <details> sections; future steps stay locked until Continue.

Invite email Current

Maya Chen

You’re invited to Harbor Studio

Accept to join as a Guide on Northstar.

Join team
Harbor Studio Guide role · Invited by Maya

12 teammates

Profile & password
  • At least 8 characters
  • One uppercase letter
  • One number
  • One symbol
.invflow-sheet

Mobile Sheet Stack

Phone-framed invite that starts as a bottom sheet, then full-screen join → profile → app.

Northstar

Team invite

You’re invited

Guide
Harbor Studio From Maya Chen
.invflow-existing

Existing Account Fast Track

Same four stages, but the invitee already has Northstar — skip password, confirm join, land in app.

  1. Invite
  2. Join
  3. Profile
  4. App

Invite for Avery

You’re already signed in to Northstar. Continue to join Harbor Studio.

Avery Chen

[email protected]

Harbor Studio Maya invited you as Guide