Team
Team member lists, invite forms, role selectors, and workspace switchers.
Team Member List
List of team members with roles, status, and management actions.
Preview
AJ
Alice Johnson
Admin
alice@example.com
BS
Bob Smith
Member
bob@example.com
CW
Carol White
Pending
carol@example.com
Team Member List.tsx
import { TeamMemberList } from "@launchapp/design-system/blocks/team";const members = [ { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active", avatarUrl: "" }, { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Member", status: "active", avatarUrl: "" },];export default function Page() { return ( <TeamMemberList members={members} onRemove={(id) => console.log("remove", id)} onChangeRole={(id, role) => console.log(id, role)} /> );}Invite Form
Form to invite new team members by email with role selection.
Preview
No preview available
See the code snippet below for usage.
Invite Form.tsx
import { InviteForm } from "@launchapp/design-system/blocks/team";export default function Page() { return ( <InviteForm roles={["admin", "member", "viewer"]} onInvite={(email, role) => console.log("invite", email, role)} /> );}Role Selector
Dropdown or radio selector for assigning roles with description tooltips.
Preview
No preview available
See the code snippet below for usage.
Role Selector.tsx
import { RoleSelector } from "@launchapp/design-system/blocks/team";const roles = [ { id: "admin", label: "Admin", description: "Full access to all resources" }, { id: "member", label: "Member", description: "Can view and edit assigned projects" }, { id: "viewer", label: "Viewer", description: "Read-only access" },];export default function Page() { return ( <RoleSelector roles={roles} value="member" onChange={(role) => console.log("role", role)} /> );}Workspace Switcher
Dropdown for switching between multiple workspaces or organizations.
Preview
No preview available
See the code snippet below for usage.
Workspace Switcher.tsx
import { WorkspaceSwitcher } from "@launchapp/design-system/blocks/team";const workspaces = [ { id: "personal", name: "Personal", plan: "Free", avatarUrl: "" }, { id: "acme", name: "Acme Corp", plan: "Pro", avatarUrl: "" },];export default function Page() { return ( <WorkspaceSwitcher workspaces={workspaces} currentWorkspaceId="acme" onSwitch={(id) => console.log("switch to", id)} /> );}