UIforSaaSTeam Invitation Flow
A clean, minimal component for inviting team members with role-based permissions. Simple structure with clear actions and status indicators.
Preview
Features
- Clean card layout with header and invitation list
- Bulk email input with colorful avatar chips
- Role selector with distinct icons (Admin, Member, Viewer)
- Expiration dropdown with quick presets
- Always-visible action buttons for better accessibility
- Mobile-friendly layout with stacked rows and accessible controls
- Status badges with semantic colors
- Simple empty state design
- Confirmation dialog for destructive actions
- Loading skeleton states
Install Summary
This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.
Component Files
| File | Path |
|---|---|
| team-invitation.tsx | components/user-management/team-invitation/team-invitation.tsx |
| invite-modal.tsx | components/user-management/team-invitation/invite-modal.tsx |
| pending-invitations.tsx | components/user-management/team-invitation/pending-invitations.tsx |
| invitation-row.tsx | components/user-management/team-invitation/invitation-row.tsx |
| email-input.tsx | components/user-management/team-invitation/email-input.tsx |
| role-select.tsx | components/user-management/team-invitation/role-select.tsx |
| expiration-select.tsx | components/user-management/team-invitation/expiration-select.tsx |
| confirm-dialog.tsx | components/user-management/team-invitation/confirm-dialog.tsx |
| types.ts | components/user-management/team-invitation/types.ts |
| index.ts | components/user-management/team-invitation/index.ts |
Utility Files
| File | Path |
|---|---|
| design-tokens.ts | lib/design-tokens.ts |
Dependencies
Install these dependencies before using the component:
Installation
Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:
Code available with Pro
Unlock this component to download or copy the install files.
One-time $99. Updates included.
Component Files
The component consists of the following files:
1. team-invitation.tsx
2. invite-modal.tsx
3. pending-invitations.tsx
4. invitation-row.tsx
5. email-input.tsx
6. role-select.tsx
7. expiration-select.tsx
8. confirm-dialog.tsx
9. types.ts
10. index.ts
Shared Utilities
This component uses shared utility functions. These are included in the bundle above:
design-tokens.ts
Usage
TeamInvitation Props
| Prop | Type | Default |
|---|---|---|
| invitations | Invitation[] | required |
| onInvite | (emails: string[], role: InvitationRole, expiresAt?: Date | null) => Promise | required |
| onResend | (invitationId: string) => Promise | - |
| onRevoke | (invitationId: string) => Promise | - |