Invite peoplePro
Invite teammates with roles, bulk paste validation, a seat meter, and avatars that fly into a pending list.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { InvitePeople } from 'animui/invite-people';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this as a starting point and replace the sample data with your own.
import { InvitePeople } from "animui/invite-people"; export function InviteDialogBody() { return <InvitePeople />;}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.
