Invite people
ProInvite teammates with roles, bulk paste validation, a seat meter, and avatars that fly into a pending list.
Live block · sample data
- Inviting several people at once by name or email, with a role for each.
- Plans with a seat limit where people should see the effect of an invite before sending.
- Flows where users paste a messy list from a spreadsheet and need clear per-entry errors.
- Use team-members to manage people who already joined.
- Use roles-permissions to edit what each role can do.
- Use tag-input for a plain chip field without a directory, roles, or seats.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as a starting point and replace the sample data with your own.
example.tsx
import { InvitePeople } from "@/components/arc/blocks/invite-people/invite-people"; export function InviteDialogBody() { return <InvitePeople />;}Built fromMotion
InvitePeople
A workspace invite form. People are picked from a directory or typed and pasted as emails, each gets a role, and a seat meter tracks members, pending invites, and the new selection against the plan limit. Sending, joining, resending, revoking, and upgrading are simulated. Also the default export.
No props.
- Arrow DownorArrow Up
- Moves through the suggestion list, skipping people already on the team or invited.
- Enter
- Adds the highlighted suggestion, or turns the typed text into a chip.
- ,or;
- Commits the typed text as a chip.
- Backspace
- In an empty field, the first press marks the last chip and the second removes it.
- Escape
- Closes the suggestion list, then clears the typed text.
- Arrow Down (role button)
- Opens the role menu for that chip.
- Arrow UporDown, HomeorEnd, Escape
- Move through and close the role menu; Escape returns focus to the role button.
- The field is a combobox with aria-expanded, aria-controls, and aria-activedescendant pointing into a role="listbox" of options; blocked options are aria-disabled.
- Role menus are role="menu" with menuitemradio items and aria-checked.
- The seat bar is a role="meter" with aria-valuetext such as "12 of 10 seats, 2 over the limit".
- Send stays focusable with aria-disabled while blocked and points aria-describedby at the error list or the seat summary.
- Every add, remove, send, join, and revoke is announced in a polite live region.
- Avatars share layoutIds, so a person flies from the suggestion into a chip, from the chip into the pending list, and from the row into the team stack when they join.
- Invalid chips shake when you try to send; the over-limit notice shakes on the same attempt.
- Labels that change length resize on a spring and crossfade their text; the field height springs as chips wrap.
- Reduced motion (MotionConfig reducedMotion="user" plus a hydrated flag) removes shakes, offsets, and layout travel and sets durations to zero.
- The card is at most 600px wide and is a size container. Below 440px pending rows move the status under the name and suggestions hide their title column.
- Below 480px viewport width the padding drops to 16px and the corner radius shrinks.
- The role menu is positioned inside the block and clamped 8px from its edges.
- AutoWidth and AutoHeight use one ResizeObserver each to spring sizes; there is no per-frame loop.
- Suggestions filter the in-memory directory on every keystroke and show at most five. For a large directory, search on the server and debounce.
- All simulated timers are tracked and cleared on unmount and on reset.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for inviting teammates to a workspace with per-person roles and a seat limit.
- Replace DIRECTORY, TEAM, INVITED, PLANS, and ROLES in invite-people-data.ts with your own data. parseToken and splitList handle names, bare emails, and "Name <email>" from pasted lists.
- There are no props or callbacks. Wire the send, resend, revoke, and upgrade functions in the component to your API; the timers there only simulate delivery and one accepted invite.
- Error chips explain each bad entry in plain words; clicking one moves its text back into the field for editing.
The full library index for assistants is at /llms.txt.
