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
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 { TeamMembers } from 'animui/team-members';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 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 "animui/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 animui avatar, button, search-field, text-morph, and animated-counter.
The full library index for assistants is at /llms.txt.