Users Admin Page React block 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

Users Admin Page 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 UsersAdminPage from @/components/blocks/users-admin-page.

// app/(admin)/team/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell>{children}</AdminShell>)
"use client"

import { UsersAdminPage } from "@/components/blocks/users-admin-page"

export default function TeamPage() {
  return (
    <UsersAdminPage
      companyName="Northwind Labs"
      onInvite={async ({ emails, role }) => {
        await fetch("/api/team/invitations", { method: "POST", body: JSON.stringify({ emails, role }) })
      }}
      onRoleChange={async (member, role) => {
        await fetch(`/api/team/${member.id}`, { method: "PATCH", body: JSON.stringify({ role }) })
      }}
      onPermissionsSave={async (permissions) => {
        await fetch("/api/roles", { method: "PUT", body: JSON.stringify(permissions) })
      }}
    />
  )
}

Props

• companyNamedefault "Northwind Labs"
  string

  The workspace named in the description ("Manage who has access to Northwind Labs").

• members
  MemberData[]

  The team; defaults to the eight people of Northwind Labs (USERS_ADMIN_SAMPLE.members). The member with isYou cannot change their own role or leave.

• invites
  PendingInvite[]

  Pending invitations; defaults to USERS_ADMIN_SAMPLE.invites (one pending, one expired). Invitations that have not expired hold a seat.

• roles
  MemberRole[]

  The roles a member can have: Administrator, Manager, Sales, Accounting, Read only (USERS_ADMIN_SAMPLE.roles).

• permissionRoles
  PermissionRole[]

  The matrix's columns, same ids as roles; the locked Administrator holds every permission (USERS_ADMIN_SAMPLE.permissionRoles).

• permissionGroups
  PermissionGroup[]

  Six groups (Clients, Deals, Invoices, Reports, Automations, Settings and team) with 4 to 6 permissions and their requirements (USERS_ADMIN_SAMPLE.permissionGroups).

• permissions
  PermissionsValue

  The saved permissions, controlled (role id to granted permission ids); pair it with onPermissionsSave.

• defaultPermissions
  PermissionsValue

  The saved permissions while uncontrolled; defaults to USERS_ADMIN_SAMPLE.permissions.

• onPermissionsSave
  (value: PermissionsValue) => (void | Promise<unknown>)

  The save bar's Save (and mod+s). A promise keeps it saving; a rejection keeps the bar with its message. Default: a simulated request.

• defaultPermissionsDraft
  PermissionsValue

  Edits already pending when the page opens (the save bar showing); USERS_ADMIN_SAMPLE.permissionsDraft has three.

• onDirtyChange
  (dirty: boolean) => void

  The matrix differs from the saved value, or no longer does; hide a phone tab bar while true so one bar holds the bottom edge.

• auditEvents
  AuditEvent[]

  The audit log, newest first; defaults to 120 events over the last 30 days (USERS_ADMIN_SAMPLE.auditEvents). Changes made on this page are added on top.

• auditActions
  Record<string, AuditActionDef>

  Verb, tone, group and icon per action key; defaults to USERS_ADMIN_SAMPLE.auditActions with icons per key.

• auditTargetTypes
  Record<string, string>

  Record type names for the filter and the export (member, role, client, invoice, deal, settings, login).

• defaultAuditFilter
  FilterGroup

  The audit log's first filter; usersAdminAuditTypeFilter(["invoice"]) shows only invoices.

• auditPeriodDaysdefault 7
  number

  The audit log's period on open: the last n days up to now; 0 shows all time.

• seatsdefault "{ used: 8, total: 10 }"
  { used: number; total: number }

  Seats in the plan. Pending invitations reserve seats; with none free, inviting offers to add seats first.

• seatStepdefault 5
  number

  How many seats "Add seats" adds to the plan.

• tab
  "members" | "roles" | "audit"

  The open tab, controlled; pair it with onTabChange.

• defaultTabdefault "members"
  "members" | "roles" | "audit"

  The tab open on mount while uncontrolled.

• onTabChange
  (tab: UsersAdminTab) => void

  Called on a tab switch (after the unsaved changes question, when there is one).

• require2fadefault true
  boolean

  The workspace requires two-step verification: members without it get a warning with Send reminder.

• canManagedefault true
  boolean

  False is the read-only view: no invite, role changes, removals, new roles or matrix edits, and an info alert says why.

• saveShortcutdefault "mod+s"
  string

  Saves the matrix while it has unsaved changes; "" turns the key off.

• inviteOpen
  boolean

  The invite dialog, controlled (the shell's "Invite a teammate" command can open it).

• defaultInviteOpendefault false
  boolean

  Opens the invite dialog on mount (the seats dialog when every seat is taken).

• onInviteOpenChange
  (open: boolean) => void

  Called when the invite dialog opens or closes.

• securityHrefdefault "/settings/security"
  string

  Where "Security settings" in the header menu goes.

• onInvite
  (input: { emails: string[]; role: string; message?: string }) => (void | Promise<unknown>)

  Sends invitations; the page adds them to Invitations. Default: a simulated request.

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

  A member's new role; a rejection rolls the picker back and shows its message. The last administrator cannot be demoted.

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

  Removes a member after the confirmation; the seat frees up.

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

  Sends an invitation again and restarts its seven days.

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

  Revokes an invitation; a rejection brings the row back.

• onRoleCreate
  (role: { name: string; description?: string; copyFrom?: string }) => (void | Promise<unknown>)

  Creates a role from the New role dialog; the page adds its column with the copied permissions. A rejection shows under the name.

• onExport
  (members: MemberData[]) => (void | Promise<unknown>)

  Export members CSV. Default: downloads members-<date>.csv with ; separators and a byte order mark.

• onRemindTwoFactor
  (members: MemberData[]) => (void | Promise<unknown>)

  Send reminder, with the members who have no two-step verification.

• onAddSeats
  (count: number) => (void | Promise<unknown>)

  Adds seatStep seats from the seats dialog; then the invite form opens.

• labelsdefault "DEFAULT_USERS_ADMIN_PAGE_LABELS"
  Partial<UsersAdminPageLabels>

  Every visible string, English by default (USERS_ADMIN_PAGE_LABELS_EN); USERS_ADMIN_PAGE_LABELS_RO is the Romanian set. Nested keys carry the composed items' strings (membersTable, permissionsMatrix, auditLog, auditFilters, auditPeriod, usageMeter).

• localedefault "en-US"
  string

  Intl locale for numbers, dates and relative times.

• now
  Date | number

  The reference time for last activity, invitations and the audit period; default the live clock.

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

  Accent of the invite button, the tabs, the selected role, the checkboxes and the save bar.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Corner size of the role cards and the skeleton panels (12 / 16 / 24px).

• loadingdefault false
  boolean

  Skeletons in the real layout: the header, the seats, the member rows, the role cards and the matrix.

• animateIndefault true
  boolean

  The header and the panel rise in once when the page mounts on the client; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the header's links; default the surrounding LinkProvider's (the admin shell's).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<UsersAdminPageSlot, string>>

  Classes for header, seats, panels, members, twoFactor, readOnly, roles, roleList, roleCard, permissions, saveBar, audit, seatsDialog and roleDialog.

Parts

FAQ

More React blocks