User Management

A full user management page — list users, invite new ones, change roles, and deactivate accounts. Built for tenant-admin and super-admin panels.

When to use this recipe

Use this inside your Settings or Admin section for any page where an administrator needs to manage who has access. Works for both tenant-scoped and platform-wide user management.

Components used

Layout · Header · DataTable · Badge · Modal · Input · Select · Button

Preview · User Management

Code

HTML · @primus/ui-core

<div class="page-content">
  <div class="page-header">
    <div>
      <h1>Users</h1>
      <p>24 members · 3 pending invitations</p>
    </div>
    <button class="small">+ Invite user</button>
  </div>

  <div class="hstack" style="margin-bottom:1rem;gap:0.75rem">
    <input type="search" placeholder="Search by name or email..." style="max-width:240px" />
    <select>
      <option>All roles</option>
      <option>Admin</option>
      <option>Member</option>
      <option>Viewer</option>
    </select>
    <select>
      <option>All status</option>
      <option>Active</option>
      <option>Pending</option>
      <option>Inactive</option>
    </select>
  </div>

  <div class="card table">
    <table>
      <thead>
        <tr>
          <th>User</th>
          <th>Role</th>
          <th>Status</th>
          <th>Last active</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jane Doe<br/><small>jane@acme.com</small></td>
          <td><span class="badge accent">Admin</span></td>
          <td><span class="badge success">Active</span></td>
          <td>Just now</td>
          <td><button class="ghost small">Edit</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

React

// See full implementation in the Preview above
import {
  PrimusLayout, PrimusHeader, PrimusDataTable,
  PrimusFilterBar, PrimusModal,
  PrimusInput, PrimusSelect, PrimusButton, Badge,
} from 'primus-react-ui';

Angular

// user-management.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({ templateUrl: './user-management.component.html' })
export class UserManagementComponent implements OnInit {
  users     = [];
  inviteOpen = false;
  invite = { email: '', role: 'member' };
  activeFilters = {};

  filterConfig = [
    { key: 'role',   label: 'Role',   type: 'select', options: ['Admin','Member','Viewer'] },
    { key: 'status', label: 'Status', type: 'select', options: ['Active','Pending','Inactive'] },
  ];

  roleOptions = [
    { value: 'admin',  label: 'Admin' },
    { value: 'member', label: 'Member' },
    { value: 'viewer', label: 'Viewer' },
  ];

  columns = [
    { key: 'name',       header: 'User',        sortable: true },
    { key: 'role',       header: 'Role' },
    { key: 'status',     header: 'Status' },
    { key: 'lastActive', header: 'Last active' },
  ];

  constructor(private userSvc: UserService) {}

  async ngOnInit() {
    this.users = await this.userSvc.list();
  }

  openInvite()  { this.inviteOpen = true; }
  openEdit(row) { /* open edit modal */ }
  onFilter(f)   { this.activeFilters = f; }

  async sendInvite() {
    await this.userSvc.invite(this.invite);
    this.inviteOpen = false;
    this.invite = { email: '', role: 'member' };
  }
}