team-members

Team Members

Team management card: a seat count, an invite row with email and role, and each member with a role select and a menu to resend, revoke or remove.

States: Default

Parts

Part	File	Does
TeamMembers	TeamMembers.vue	Lists team members with roles, and lets the user invite, change roles and remove members.

Install

Writes 3 files into components/sections/team-members/. For agents, npx @frontic/ui docs team-members prints this reference as markdown; the MCP server serves the same.

Installs with it: avatar; badge; button; card; dropdown-menu; input; item; select; text
npm packages: @lucide/vue

Built from

Avatar Badge Button Card Dropdown Menu Input Item Select

API reference

TeamMembers TeamMembers.vue

Lists team members with roles, and lets the user invite, change roles and remove members.

Prop	Type	Default
roles*	TeamRole[]	—

ownerRole	string	'owner'

inviteRole	string	—

seats	string	—

title	string	'Team'

description	string	'People who can manage your store.'

invitePlaceholder	string	'colleague@example.com'

emailLabel	string	'Email address'

roleLabel	string	'Role'

inviteLabel	string	'Invite'

pendingLabel	string	'Pending'

activityLabel	string	'View activity'

removeLabel	string	'Remove from team'

resendLabel	string	'Resend invite'

revokeLabel	string	'Revoke invite'

memberRoleLabel	((member: TeamMember) => string)	`Role of ${member.name}`

memberActionsLabel	((member: TeamMember) => string)	`Actions for ${member.name}`

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

members	TeamMember[]	[]

Event	Payload
remove	member: TeamMember

update:members	value: TeamMember[]

invite	email: string, role: string

activity	member: TeamMember

resend	member: TeamMember

revoke	member: TeamMember

Data attribute	Values
data-surface	'raised' \| 'bare'

Example