An invite acceptance that starts from a ticket with the inviter and member stack, creates the account with the email already verified, then turns into a token field for inviting teammates. Emails become chips with a role switch and an External tag, a seat meter fills as you add people, and sent chips fly into the member stack.
Jordan Reyes invited you to join
Atlas RoboticsPaste a list or type emails. People outside atlasrobotics.com join as guests.
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-team-invite.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-team-invite.tsx.
import { AuthFlowTeamInvite } from "@/components/hyperblur/auth-flow-team-invite"
<AuthFlowTeamInvite workspace="Atlas Robotics" inviter="Jordan Reyes" email={invite.email} onJoin={api.acceptInvite} onInvite={api.sendInvites} />| Prop | Type | Default | Description |
|---|---|---|---|
| workspace | string | "Atlas Robotics" | Workspace being joined. |
| inviter | string | "Jordan Reyes" | Person who sent the invite. |
| string | "sam.okafor@atlasrobotics.com" | Invited email, shown locked as verified. | |
| role | string | "Editor" | Role granted by the invite. |
| domain | string | "atlasrobotics.com" | Company domain. Emails outside it are tagged External and default to Guest. |
| members | { name: string; color?: string }[] | 6 members | Current members for the avatar stack and the seat count. |
| suggestions | string[] | 3 colleagues | Suggested teammates with an Add button. |
| seats | number | 12 | Seats on the plan. Sending is blocked when invites exceed the free seats. |
| defaultStep | number | 0 | Starting step: 0 account, 1 invite teammates, 2 done. |
| defaultInvites | string[] | [] | Emails prefilled as chips in the invite step. |
| onJoin | (values: { name: string; password: string }) => void | Promise<unknown> | Called when the account form is submitted. | |
| onInvite | (invites: { email: string; role: "Member" | "Admin" | "Guest" }[]) => void | Promise<unknown> | Called with the valid invites when Send is pressed. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of each step title. |
| accent | string | "#34d399" | Logo, buttons, seat meter and focus color. |