Team membersPro
A members list where typed emails turn into chips and fly into pending invites as seats roll.
Members
Manage who can work in the Fieldnote workspace.
7 of 10 seats
Members 5
Pending invites 2
- The team or workspace settings page of a SaaS app.
- Inviting several people at once by typing or pasting emails.
- Member lists with roles, pending invites, and seat counts.
- Use team-directory for a browsable people directory.
- Use roles-permissions to define what each role can do.
- Use tag-input for a general chip input outside invites.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on the team or workspace settings page of a SaaS app. Load members, invites, and seat limits from your API and connect role changes, Send invite, Resend, Revoke, and Remove to it; every invite and removal in the preview is simulated.
import { TeamMembers } from "@/registry/blocks/team-members/team-members"; export default function TeamSettings() { return ( <main> <TeamMembers /> </main> );}TeamMembers
A members list with an invite field that turns typed emails into chips, pending invites, role selects, seat counts, and confirm to remove. Members, invites, and seats are simulated.
No props.
- Enter
- Turns the typed email into a chip, or sends invites when the field is empty.
- ,or;orSpace
- Commits the typed email as a chip.
- Backspace
- Removes the last chip when the field is empty.
- Escape
- Cancels a pending member removal.
- Role selects use Radix select with full keyboard support.
- Invite validation messages sit in a polite live region, and actions are announced in a status region.
- Email chips fly into the pending invites list and the seat count rolls.
- Rows enter and leave with layout animation.
- Reduced motion makes the flight and reflow instant.
- Below 600px container width the header and invite row stack and the search goes full width.
- Below 420px each member row splits into the identity on top and last active, role, and remove underneath.
- Member rows are not virtualized; add paging for large organizations.
- Rows enter and leave with layout animation, and a ResizeObserver drives the height morph.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on the team or workspace settings page of a SaaS app.
- Load members, invites, and seat limits from your API and connect role changes, Send invite, Resend, Revoke, and Remove to it.
- Composes Arc avatar, button, search-field, text-morph, and animated-counter.
The full library index for assistants is at /llms.txt.