An invite panel with a seat bar split by members, pending and new. At the seat limit, the action becomes an upgrade.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/invite-teammatesPlayground
Invite teammates
Add people to Fieldwork by name or email
Separate with commas, or paste a whole list
6 of 10 seatsStarter plan
- 5 members
- 1 pending
- 0 new
Pending 1
- Tyler HayesMember · tyler.hayes@fieldwork.exampleSent 2 days ago
Seat limit
Invite teammates
Add people to Fieldwork by name or email
Only 4 seats left on Starter. Remove one or upgrade.
11 of 10 seatsStarter plan
- 5 members
- 1 pending
- 5 new
Pending 1
- Tyler HayesMember · tyler.hayes@fieldwork.exampleSent 2 days ago
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/invite-teammates
Accessibility
- Over the limit, the input is invalid and the message is linked and announced.
- The seat bar repeats in the legend, so it is never colour alone.
- Resend and Revoke name the person.
Motion
- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- The seat count rolls as people are added.
- Send invites and Resend turn their icon into a spinner, then a check with the sent count, and rest after 1.6 s.
- With reduced motion, the panel fades only and values swap.
Responsive behavior
- Paste a sample list and Sent are dropped below 480 wide.
Performance
- Entries are parsed once per change, memoized.
- The seat bar resizes with flex-grow, so it runs layout as people type. Keep it to one per view.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import InviteTeammates from @/components/fetaui/invite-teammates. It composes Input, Button and Icon Button with Avatar and AvatarStack from product-kit.
- Over the seat limit the field turns invalid and Send invites becomes the upgrade Button. Wire onUpgrade and set upgradeLabel.
- members is a count and pending is a list. Entries can be names or emails and are not validated, so check them in onSend.
- Paste a sample list shows only when sample is set, so leave it out in production. The demo sends nothing.
Related
Invite FieldComponentA wrapping box of email chips, a role Select and Send. Send waits until every address is valid.MembersComponentWorkspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.Member RowComponentOne member: avatar, name and email, last activity, a role Select and a menu. Pending adds Invited and Resend, and Deactivated locks the role.Plan CardComponentOne plan: name, price, pitch, features and a full width Button.