Members table React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Members table is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import MembersTable from @/components/ui/members-table.

import { useState } from "react"
import { MembersTable, type MemberData, type MemberRole, type PendingInvite } from "@/components/ui/members-table"

const ROLES: MemberRole[] = [
  { value: "admin", label: "Admin", description: "Full access, including billing and the team" },
  { value: "sales", label: "Sales", description: "Clients, quotes and the pipeline" },
  { value: "viewer", label: "Read only", description: "Sees everything, changes nothing" },
]

export function TeamSettings({ initial }: { initial: MemberData[] }) {
  const [members, setMembers] = useState(initial)
  const [invites, setInvites] = useState<PendingInvite[]>([])
  return (
    <MembersTable
      members={members}
      roles={ROLES}
      invites={invites}
      seats={{ used: members.length, total: 12 }}
      onRoleChange={async (member, role) => {
        await fetch(`/api/members/${member.id}`, { method: "PATCH", body: JSON.stringify({ role }) })
        setMembers((list) => list.map((m) => (m.id === member.id ? { ...m, role } : m)))
      }}
      onRemove={async (member) => {
        await fetch(`/api/members/${member.id}`, { method: "DELETE" })
        setMembers((list) => list.filter((m) => m.id !== member.id))
      }}
      onInvite={async ({ emails, role }) => {
        await fetch("/api/invites", { method: "POST", body: JSON.stringify({ emails, role }) })
        setInvites((list) => [
          ...emails.map((email) => ({ id: email, email, role, invitedAt: Date.now() })),
          ...list,
        ])
      }}
      labels={{ invite: "Add teammates", search: "Search the team" }}
    />
  )
}

Props

• members*
  MemberData[]

  The team: { id, name, email, avatar?, role, status?: "active" | "suspended", lastActiveAt?, joinedAt?, twoFactor?, isYou?, isOwner?, title? }. isYou and isOwner lock the role and removal (owner rules win).

• roles*
  MemberRole[]

  The roles the select offers, in rank order: { value, label, description?, disabled? }. A member whose role is not listed shows the raw value with Unknown role.

• invitesdefault "[]"
  PendingInvite[]

  Pending invitations: { id, email, role, invitedAt, invitedBy?: { name, avatar? }, expiresAt? }. Expired ones sort last with an Expired badge and stop reserving a seat.

• onRoleChange
  (member: MemberData, role: string) => (void | Promise<unknown>)

  Optimistic: the row shows the new role with a spinner while the promise runs; a rejection rolls it back, outlines the select and announces labels.roleError.

• onRemove
  (member: MemberData) => (void | Promise<unknown>)

  Runs after the confirmation (unless confirmRemove is false). A returned promise keeps the confirmation loading; a rejection shows labels.removeError in it.

• onInvite
  (input: MemberInviteInput) => (void | Promise<unknown>)

  { emails, role, message? }. Shows the invite button. A returned promise keeps the dialog loading; on success it closes and switches to the Invitations tab, on rejection the error shows under the address field. The same dialog is exported alone as InviteMembersDialog (see Parts).

• onResendInvite
  (invite: PendingInvite) => (void | Promise<unknown>)

  Adds Resend invitation to each invitation's menu; the ⋯ button spins while it runs.

• onRevokeInvite
  (invite: PendingInvite) => (void | Promise<unknown>)

  Adds Revoke invitation. The row leaves at once and comes back if the promise rejects.

• getActions
  (member: MemberData) => MenuEntry[]

  Extra entries for a member's ⋯ menu, above Remove from team (the W1 MenuEntry shape).

• confirmRemovedefault true
  boolean

  Ask before removing someone, in an alert dialog with their name and email. Off, the row leaves at once and comes back if the request fails.

• canManagedefault true
  boolean

  false is a member's view: roles read as text, no remove, no invite, no invitation actions.

• seats
  { used: number; total: number }

  The seats meter in the header. Pending invitations reserve seats (the lighter part of the bar), and the invite dialog refuses more addresses than are free with labels.noSeats.

• defaultInviteRoledefault ""
  string

  The role picked when the invite dialog opens. Empty picks the last enabled role (the least access).

• tab
  "members" | "invites"

  The active tab, controlled. Pair it with onTabChange.

• defaultTabdefault "members"
  "members" | "invites"

  The tab shown first while uncontrolled.

• onTabChange
  (tab: "members" | "invites") => void

  Called when the tab changes, also after invitations were sent.

• showInvitesdefault true
  boolean

  The Invitations tab. Off shows the members alone under a heading.

• searchabledefault true
  boolean

  The search field. It filters by name and email, ignoring case and diacritics, and highlights the matches.

• sort
  TableSort | null

  The sort, controlled: { key: "name" | "role" | "lastActive", direction }. null is unsorted.

• defaultSortdefault "{ key: "name", direction: "asc" }"
  TableSort | null

  The first sort while uncontrolled. Role sorts by the order of roles, with the owner first.

• onSortChange
  (sort: TableSort | null) => void

  Called when a header is pressed.

• showStatusdefault true
  boolean

  The Status column: Active (success) or Suspended (neutral) badges with a dot.

• showTwoFactordefault true
  boolean

  The 2FA column: a green shield when on, an Off warning badge when not.

• showLastActivedefault true
  boolean

  The Last active column (sortable, newest first).

• timeFormatdefault "relative"
  "relative" | "time" | "date" | "datetime"

  How last activity and sent times read: "5 min ago", a clock time, a date or both.

• densitydefault "default"
  "compact" | "default" | "comfortable"

  Row height 36 / 48 / 56px with a 24 / 32 / 40px avatar. Compact puts the email on the name's line. Cards (below 768px of width) keep one size.

• variantdefault "surface"
  "surface" | "plain"

  surface sits the table in a raised panel; plain drops the panel, for a table inside a settings card.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The invite button, the active tab's bar, the seats bar and the dialog's Send button.

• colordefault ""
  string

  Any CSS color in place of the tone.

• inviteOpen
  boolean

  The invite dialog, controlled. Pair it with onInviteOpenChange.

• defaultInviteOpendefault false
  boolean

  Opens the invite dialog on mount.

• onInviteOpenChange
  (open: boolean) => void

  Called when the invite dialog opens or closes.

• responsivedefault true
  boolean

  Below 768px the role picker, the row menus and the invite dialog open as bottom sheets.

• loadingdefault false
  boolean

  Skeleton rows (cards on phones) with the real shape: avatar, two lines, a role pill.

• skeletonCountdefault 5
  number

  Skeleton rows while loading (at most four cards on phones).

• emptyState
  ReactNode

  Replaces the empty state shown when there are no members (the default offers the invite button).

• now
  Date | number

  The reference time for relative times and expiry. Defaults to a live clock that ticks every minute; demos pin 24.09.2026 16:40.

• localedefault ""
  string

  Formats times, dates and counts. Empty uses the UIProvider locale, then the browser's.

• labelsdefault "DEFAULT_MEMBERS_TABLE_LABELS"
  Partial<MembersTableLabels>

  Every string, English by default: caption, members(count, formatted), invites(count, formatted), invite, search, results, member, role, status, sortAscending / sortDescending / clearSort ({column} is the header text), lastActive, twoFactor, twoFactorOn / Off, you, owner, active, suspended, never, joined(date), roleFor(name), unknownRole, selfRole, ownerRole, roleChanged(name, role), roleError, savingRole, remove, removeTitle(name), removeDescription, removeConfirm, removing, cancel, selfRemove, ownerRemove, removed(name), removeError, actions, actionsFor(name), email, invitedBy, sentAt, expiresAt, expired, expires(date), resend, revoke, resent(email), revoked(email), inviteActionError, seats(used, total), seatsReserved(count), noSeats(free), freeSeats(free), inviteTitle, inviteDescription, emails, emailsPlaceholder, emailsHint, invalidEmail, alreadyMember, alreadyInvited, notAdded, dismiss(email), inviteRole, message, messagePlaceholder, summary(count, formatted, role), send(count), sending, sent(count, formatted), inviteError, close, empty, emptyDescription, noResults, noResultsDescription(query), clearSearch, noInvites, noInvitesDescription.

• classNames
  Partial<Record<"header" | "tabs" | "search" | "seats" | "invite" | "table" | "row" | "cards" | "card" | "invites" | "empty" | "dialog", string>>

  Extra classes for the parts. dialog goes on the invite dialog's content.

• className
  string

  Extra classes for the root, merged last. Other props spread onto it.

Parts

FAQ

Used in

More React table and list components