Settings

Team Settings

A team management panel listing current members with their roles. Owners and admins can invite new members by email, change roles via a select dropdown, and remove members.

Team members

4 members

AM
Alice Martin
alice@example.com
Owner
BC
Bob Chen
bob@example.com
Admin
CK
Carol Kim
carol@example.com
Member
DP
David Park
david@example.com
Member

import { TeamSettings } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add team-settings

Import

import.tsx

import { TeamSettings } from "@aetherstack/blocks"
import type { TeamMember } from "@aetherstack/blocks"

Usage

team-settings.tsx

import { TeamSettings } from "@aetherstack/blocks"
import type { TeamMember } from "@aetherstack/blocks"

const members: TeamMember[] = [
  { id: "1", name: "Alice Martin", email: "alice@example.com", role: "owner" },
  { id: "2", name: "Bob Chen",     email: "bob@example.com",   role: "member" },
]

export default function TeamPage() {
  return (
    <TeamSettings
      members={members}
      onInvite={(email, role) => inviteMember(email, role)}
      onRoleChange={(id, role) => updateRole(id, role)}
      onRemove={(id) => removeMember(id)}
    />
  )
}

Props

Prop	Type	Default	Description
members	TeamMember[]	—	Current team members. Each has id, name, email, role, and optional avatarUrl.
onInvite	(email: string, role: string) => void	—	Called when the invite form is submitted.
onRoleChange	(id: string, role: string) => void	—	Called when a member's role is changed via the select.
onRemove	(id: string) => void	—	Called when the remove button is clicked for a member.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→Role select dropdowns are built on the Select primitive with proper ARIA combobox semantics.
→Remove buttons carry aria-label including the member's name for screen reader context.
→The invite form email input has type="email" for native validation and mobile keyboard optimisation.
→Member avatars fall back to initials via the AvatarFallback primitive.