# Invite Members

A team invite card: paste a list of emails and each becomes a chip, bad or duplicate addresses shake red, and sending flies each address out of its chip into its own row in the member list.

- Page and source: https://uibrik.com/components/invite-members
- Install: `npx shadcn@latest add https://uibrik.com/r/invite-members.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { InviteMembers } from "@/components/uibrik/invite-members/invite-members"`

Where to use the Invite Members React component:

- **SaaS onboarding**: Pasting a list of emails that become chips makes inviting a team fast. Pairs with [Tag Input](https://uibrik.com/components/tag-input).
- **Team settings**: Bad or duplicate addresses shaking red prevent wasted invites. Pairs with [Permissions Matrix](https://uibrik.com/components/permissions-matrix).
- **Project sharing**: Addresses flying into the member list confirm who was added. Pairs with [Avatar Stack](https://uibrik.com/components/avatar-stack).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Invite members"` | Heading at the top of the card. |
| placeholder | `string` | `"Emails, separated by commas"` | Shown in the empty field. |
| seats | `number` | `10` | Seats on the plan. Invites stop once they're used up. |
| duration | `number` | `0.45` | How long chips and rows take to move. |
| members / onMembersChange | `Member[] / (members) => void` |  | Controlled member list. A member is { id, email, name?, role, status?: "active" \| "pending", avatar? }. |
| defaultMembers | `Member[]` |  | Members on mount when uncontrolled. |
| onInvite | `(emails, role) => void \| Promise` |  | Called when invites are sent. Return a promise to show a spinner until it settles; if it rejects, the chips stay put. |
| roles | `(string \| { value; label })[]` | `Admin, Member, Viewer` | Roles offered for invites and in each row's menu. |
| defaultRole | `string` |  | Role picked for new invites on mount. Defaults to the second role. |
| className | `string` |  | Classes for the card. |