Product block

Team Members & Invites

Member list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.

200 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026

team
members
roles
invites
permissions

What's included

components/settings-team-members.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add settings-team-members

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Members

4 of 10 seats used

Ada Lovelace
ada@acme.com
Role for Ada Lovelace
Marco Silva
marco@acme.com
Role for Marco Silva
Priya Raman
priya@acme.com
Role for Priya Raman
alex@contractor.devInvite pending
Role for Alex Chen

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/settings-team-members.tsx

'use client'

/**
 * <SettingsTeamMembers> — the member list, with roles and invites.
 *
 * Two rules encoded here that every team-management screen needs and most
 * get wrong:
 *
 *  - The last owner cannot be demoted or removed. Allowing it orphans the
 *    workspace, and it is an easy mistake to make at 5pm on a Friday, so
 *    the control is disabled with a `title` explaining why rather than
 *    failing after the click.
 *  - Pending invites are listed alongside members but visually distinct.
 *    Hiding them in a separate tab is how the same person gets invited
 *    three times.
 */

import * as React from 'react'
import { MoreHorizontal, Mail, UserPlus } from 'lucide-react'

export type Role = 'Owner' | 'Admin' | 'Member'

export interface Member {
  id: string
  name: string
  email: string
  role: Role
  /** Invited but not yet accepted. */
  pending?: boolean
}

export interface SettingsTeamMembersProps {
  members?: Member[]
  seatLimit?: number
  onInvite?: (email: string, role: Role) => void
  className?: string
}

const ROLES: Role[] = ['Owner', 'Admin', 'Member']

const DEFAULT_MEMBERS: Member[] = [
  { id: '1', name: 'Ada Lovelace', email: 'ada@acme.com', role: 'Owner' },
  { id: '2', name: 'Marco Silva', email: 'marco@acme.com', role: 'Admin' },
  { id: '3', name: 'Priya Raman', email: 'priya@acme.com', role: 'Member' },
  { id: '4', name: 'Alex Chen', email: 'alex@contractor.dev', role: 'Member', pending: true },
]

export function SettingsTeamMembers({
  members: initialMembers = DEFAULT_MEMBERS,
  seatLimit = 10,
  onInvite,
  className = '',
}: SettingsTeamMembersProps) {
  // Per-instance ids. A literal id in a reusable component is a
  // collision waiting for the second copy on the page — and a <label>
  // then resolves to whichever input rendered first.
  const uid = React.useId()
  const [members, setMembers] = React.useState(initialMembers)
  const [inviteEmail, setInviteEmail] = React.useState('')
  const [inviteRole, setInviteRole] = React.useState<Role>('Member')

  const ownerCount = members.filter((m) => m.role === 'Owner' && !m.pending).length

  function changeRole(id: string, role: Role) {
    setMembers((prev) => prev.map((m) => (m.id === id ? { ...m, role } : m)))
  }

  function handleInvite(event: React.FormEvent) {
    event.preventDefault()
    if (!inviteEmail) return
    onInvite?.(inviteEmail, inviteRole)
    setInviteEmail('')
  }

  return (
    <div className={`overflow-hidden rounded-2xl border border-border/60 bg-card/60 ${className}`}>
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/60 px-6 py-4">
        <div>
          <h2 className="font-semibold tracking-tight">Members</h2>
          <p className="mt-0.5 text-sm text-muted-foreground">
            {members.length} of {seatLimit} seats used
          </p>
        </div>

        <form onSubmit={handleInvite} className="flex items-center gap-2">
          <label htmlFor={`${uid}-invite-email`} className="sr-only">
            Email to invite
          </label>
          <input
            id={`${uid}-invite-email`}
            type="email"
            value={inviteEmail}
            onChange={(e) => setInviteEmail(e.target.value)}
            placeholder="colleague@acme.com"
            className="w-48 rounded-xl border border-border/60 bg-background px-3 py-2 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary"
          />

          <label htmlFor={`${uid}-invite-role`} className="sr-only">
            Role for the invitee
          </label>
          <select
            id={`${uid}-invite-role`}
            value={inviteRole}
            onChange={(e) => setInviteRole(e.target.value as Role)}
            className="rounded-xl border border-border/60 bg-background px-2 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary"
          >
            {ROLES.filter((r) => r !== 'Owner').map((role) => (
              <option key={role} value={role}>
                {role}
              </option>
            ))}
          </select>

          <button
            type="submit"
            className="inline-flex items-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
          >
            <UserPlus aria-hidden className="h-4 w-4" />
            Invite
          </button>
        </form>
      </div>

      <ul className="divide-y divide-border/40">
        {members.map((member) => {
          // The workspace must keep at least one owner who has accepted.
          const isLastOwner = member.role === 'Owner' && ownerCount <= 1 && !member.pending
          const lockReason = isLastOwner
            ? 'A workspace needs at least one owner'
            : undefined

          return (
            <li key={member.id} className="flex items-center gap-3 px-6 py-3.5">
              <span
                aria-hidden
                className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                  member.pending ? 'bg-muted/60 text-muted-foreground' : 'bg-muted text-foreground/70'
                }`}
              >
                {member.pending ? (
                  <Mail className="h-4 w-4" />
                ) : (
                  member.name
                    .split(' ')
                    .slice(0, 2)
                    .map((w) => w[0] ?? '')
                    .join('')
                    .toUpperCase()
                )}
              </span>

              <div className="min-w-0 flex-1">
                <p className="flex items-center gap-2 text-sm font-medium">
                  <span className="truncate">{member.pending ? member.email : member.name}</span>
                  {member.pending ? (
                    <span className="shrink-0 rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">
                      Invite pending
                    </span>
                  ) : null}
                </p>
                {!member.pending ? (
                  <p className="truncate text-xs text-muted-foreground">{member.email}</p>
                ) : null}
              </div>

              <label htmlFor={`${uid}-role-${member.id}`} className="sr-only">
                Role for {member.name}
              </label>
              <select
                id={`${uid}-role-${member.id}`}
                value={member.role}
                disabled={isLastOwner}
                title={lockReason}
                onChange={(e) => changeRole(member.id, e.target.value as Role)}
                className="rounded-lg border border-border/60 bg-background px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-60"
              >
                {ROLES.map((role) => (
                  <option key={role} value={role}>
                    {role}
                  </option>
                ))}
              </select>

              <button
                type="button"
                disabled={isLastOwner}
                title={lockReason}
                aria-label={`Actions for ${member.name}`}
                className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
              >
                <MoreHorizontal aria-hidden className="h-4 w-4" />
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/settings-team-members.tsx and import it where you need the section:

import { SettingsTeamMembers } from '@/components/settings-team-members'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`members`	`Member[]`	—
`seatLimit`	`number`	`10`
`onInvite`	`(email: string, role: Role) => void`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

settings-team-members.html

<!--
  Team Members & Invites — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="overflow-hidden rounded-2xl border border-border/60 bg-card/60 ">
  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-border/60 px-6 py-4">
    <div>
      <h2 class="font-semibold tracking-tight">Members</h2>
      <p class="mt-0.5 text-sm text-muted-foreground">4 of 10 seats used</p>
    </div>
    <form class="flex items-center gap-2">
      <label for="_R_0_-invite-email" class="sr-only">Email to invite</label>
      <input id="_R_0_-invite-email" type="email" placeholder="colleague@acme.com" class="w-48 rounded-xl border border-border/60 bg-background px-3 py-2 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary" value="" />
      <label for="_R_0_-invite-role" class="sr-only">Role for the invitee</label>
      <select id="_R_0_-invite-role" class="rounded-xl border border-border/60 bg-background px-2 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary">
        <option value="Admin">Admin</option>
        <option value="Member" selected="">Member</option>
      </select>
      <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus h-4 w-4" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>Invite</button>
    </form>
  </div>
  <ul class="divide-y divide-border/40">
    <li class="flex items-center gap-3 px-6 py-3.5">
      <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold bg-muted text-foreground/70">AL</span>
      <div class="min-w-0 flex-1">
        <p class="flex items-center gap-2 text-sm font-medium">
          <span class="truncate">Ada Lovelace</span>
        </p>
        <p class="truncate text-xs text-muted-foreground">ada@acme.com</p>
      </div>
      <label for="_R_0_-role-1" class="sr-only">Role for Ada Lovelace</label>
      <select id="_R_0_-role-1" disabled="" title="A workspace needs at least one owner" class="rounded-lg border border-border/60 bg-background px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-60">
        <option value="Owner" selected="">Owner</option>
        <option value="Admin">Admin</option>
        <option value="Member">Member</option>
      </select>
      <button type="button" disabled="" title="A workspace needs at least one owner" aria-label="Actions for Ada Lovelace" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </li>
    <li class="flex items-center gap-3 px-6 py-3.5">
      <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold bg-muted text-foreground/70">MS</span>
      <div class="min-w-0 flex-1">
        <p class="flex items-center gap-2 text-sm font-medium">
          <span class="truncate">Marco Silva</span>
        </p>
        <p class="truncate text-xs text-muted-foreground">marco@acme.com</p>
      </div>
      <label for="_R_0_-role-2" class="sr-only">Role for Marco Silva</label>
      <select id="_R_0_-role-2" class="rounded-lg border border-border/60 bg-background px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-60">
        <option value="Owner">Owner</option>
        <option value="Admin" selected="">Admin</option>
        <option value="Member">Member</option>
      </select>
      <button type="button" aria-label="Actions for Marco Silva" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </li>
    <li class="flex items-center gap-3 px-6 py-3.5">
      <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold bg-muted text-foreground/70">PR</span>
      <div class="min-w-0 flex-1">
        <p class="flex items-center gap-2 text-sm font-medium">
          <span class="truncate">Priya Raman</span>
        </p>
        <p class="truncate text-xs text-muted-foreground">priya@acme.com</p>
      </div>
      <label for="_R_0_-role-3" class="sr-only">Role for Priya Raman</label>
      <select id="_R_0_-role-3" class="rounded-lg border border-border/60 bg-background px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-60">
        <option value="Owner">Owner</option>
        <option value="Admin">Admin</option>
        <option value="Member" selected="">Member</option>
      </select>
      <button type="button" aria-label="Actions for Priya Raman" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </li>
    <li class="flex items-center gap-3 px-6 py-3.5">
      <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold bg-muted/60 text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-4 w-4" aria-hidden="true">
          <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
          <rect x="2" y="4" width="20" height="16" rx="2"></rect>
        </svg>
      </span>
      <div class="min-w-0 flex-1">
        <p class="flex items-center gap-2 text-sm font-medium">
          <span class="truncate">alex@contractor.dev</span>
          <span class="shrink-0 rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">Invite pending</span>
        </p>
      </div>
      <label for="_R_0_-role-4" class="sr-only">Role for Alex Chen</label>
      <select id="_R_0_-role-4" class="rounded-lg border border-border/60 bg-background px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-60">
        <option value="Owner">Owner</option>
        <option value="Admin">Admin</option>
        <option value="Member" selected="">Member</option>
      </select>
      <button type="button" aria-label="Actions for Alex Chen" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="19" cy="12" r="1"></circle>
          <circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </li>
  </ul>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

7 more blocks in Settings

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Settings

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Settings blocks

View category

Grouped Settings Layout

Sidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.

Settings119 lines1 dep

Profile Form With Save Bar

Avatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.

Settings220 lines1 dep23 Aug

API Key Management

Masked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.

Settings226 lines1 dep2 Sept

Danger zone

These actions affect everyone in the workspace.

Transfer ownership
Hand this workspace to another member. You keep admin access, but billing and deletion move to them.
Archive workspace
Make everything read-only and stop billing at the end of the period. You can un-archive at any time.
Delete workspace
Permanently removes all projects, members and history. This cannot be undone and support cannot recover it.

Danger Zone

Destructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.

Settings184 lines1 dep24 Aug

Where you are signed in

One row per browser that holds a valid session. Locations are estimated from the IP address and are frequently wrong on mobile networks and VPNs — treat an unfamiliar city as worth checking, not as proof.

MacBook ProThis device
Chrome 141 · macOS 16
near Lisbon, PortugalActive now
Use Sign out in the menu
iPhone 15
Safari · iOS 19
near Lisbon, Portugal20 minutes ago
Windows PC
Edge 140 · Windows 11
near Frankfurt, Germany2 days ago
First sign-in from this country
iPad Air
Safari · iPadOS 19
near Lisbon, Portugal3 weeks ago

Active Sessions & Devices

The screen people go looking for after losing a laptop. Sign out everywhere states what it does not reach — API keys keep working — locations are written as estimates, and this device is labelled rather than revocable by misclick.

Settings302 lines1 dep

Notifications

Choose where each kind of message goes. Changes save as you make them.

Event
Security alertsNew sign-ins, password changes, recovery codes used.	Always sent by email — a security notice you can turn off is not one.
Billing and receiptsInvoices, failed payments, plan changes.	Receipts are sent by email for tax and dispute records.
IncidentsAn alert rule fired, or a service is degraded.
Mentions and repliesSomeone named you in a comment or thread.
Weekly summaryOne digest of the week, sent Monday morning.
Product updatesNew features and changelog highlights.

Notification Channel Matrix

Every event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.

Settings221 lines1 dep10 Sept

Audit log

5 entries

Security
Changed log retention
— Workspace settings
90 days365 days
Rhea Patel rhea@acme.com · Aug 30, 2:22 PM UTC · IP 203.0.113.42
Access
Removed member
— jordan@acme.com
Sam Okafor sam@acme.com · Aug 30, 9:05 AM UTC · IP 198.51.100.9
Security
Rotated API key
— prod-ingest-key
Rhea Patel rhea@acme.com · Aug 29, 6:40 PM UTC · IP 203.0.113.42
Billing
Changed plan
— Acme Corp
Team, 24 seatsStudio, 40 seats
Billing system system · Aug 28, 2:00 AM UTC · IP —
Data
Exported dataset
— customers.csv (18,402 rows)
Jordan Lee jordan@acme.com · Aug 27, 11:13 AM UTC · IP 192.0.2.77

Entries are kept for 365 days on your plan and then deleted. Export before that if you need them for longer — nothing here can be recovered afterwards.

Audit Log

A compliance-grade trail with named actors, before and after values, IP addresses, and a stated retention window — plus a count of what the active filter is hiding.

Settings270 lines1 dep10 Sept