Add User Management Page in CoreUI React Dashboard Dashboard

Hello guys, how are you? Welcome back to my blog therichpost.com. Today in this post I am going to Add User Management Page in CoreUI React Dashboard Dashboard.

Here are the two videos in first I am telling how to download and set COREUI DASHBOARD on localhost and in second I am adding custom page inside it:

For react js new comers, please check the below links:

1. Reactjs Tutorials
2. Nextjs
3. Bootstrap 5
4. React Free Ecommerce Templates
5. React Free Admins

Guys here is the code snippet and please use carefully:

🧩 src/views/pages/UserManagement/index.jsx

Here’s the full code:

import React, { useState } from "react";
import {
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CRow,
  CButton,
  CForm,
  CFormInput,
  CFormLabel,
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
  CModal,
  CModalBody,
  CModalFooter,
  CModalHeader,
  CModalTitle,
} from "@coreui/react";

const UserManagement = () => {
  const [users, setUsers] = useState([
    { id: 1, name: "Ajay Kumar", email: "ajay@example.com", role: "Admin" },
    { id: 2, name: "John Doe", email: "john@example.com", role: "Editor" },
  ]);

  const [visible, setVisible] = useState(false);
  const [formData, setFormData] = useState({ name: "", email: "", role: "" });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleAddUser = (e) => {
    e.preventDefault();
    if (!formData.name || !formData.email || !formData.role) return;
    const newUser = { id: users.length + 1, ...formData };
    setUsers([...users, newUser]);
    setFormData({ name: "", email: "", role: "" });
    setVisible(false);
  };

  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4 shadow-sm">
          <CCardHeader className="d-flex justify-content-between align-items-center">
            <strong>User Management</strong>
            <CButton color="primary" onClick={() => setVisible(true)}>
              + Add User
            </CButton>
          </CCardHeader>
          <CCardBody>
            <CTable align="middle" bordered hover responsive>
              <CTableHead color="light">
                <CTableRow>
                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
                  <CTableHeaderCell scope="col">Name</CTableHeaderCell>
                  <CTableHeaderCell scope="col">Email</CTableHeaderCell>
                  <CTableHeaderCell scope="col">Role</CTableHeaderCell>
                </CTableRow>
              </CTableHead>
              <CTableBody>
                {users.map((user, index) => (
                  <CTableRow key={user.id}>
                    <CTableDataCell>{index + 1}</CTableDataCell>
                    <CTableDataCell>{user.name}</CTableDataCell>
                    <CTableDataCell>{user.email}</CTableDataCell>
                    <CTableDataCell>{user.role}</CTableDataCell>
                  </CTableRow>
                ))}
              </CTableBody>
            </CTable>
          </CCardBody>
        </CCard>
      </CCol>

      {/* Add User Modal */}
      <CModal visible={visible} onClose={() => setVisible(false)}>
        <CModalHeader>
          <CModalTitle>Add New User</CModalTitle>
        </CModalHeader>
        <CForm onSubmit={handleAddUser}>
          <CModalBody>
            <CFormLabel>Name</CFormLabel>
            <CFormInput
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="Enter name"
              className="mb-3"
            />
            <CFormLabel>Email</CFormLabel>
            <CFormInput
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="Enter email"
              className="mb-3"
            />
            <CFormLabel>Role</CFormLabel>
            <CFormInput
              type="text"
              name="role"
              value={formData.role}
              onChange={handleChange}
              placeholder="Enter role (Admin, User, etc)"
            />
          </CModalBody>
          <CModalFooter>
            <CButton color="secondary" onClick={() => setVisible(false)}>
              Cancel
            </CButton>
            <CButton color="primary" type="submit">
              Add User
            </CButton>
          </CModalFooter>
        </CForm>
      </CModal>
    </CRow>
  );
};

export default UserManagement;

Add Route

Open src/routes.js and add:

import UserManagement from './views/pages/UserManagement';

{ path: '/user-management', name: 'User Management', element: UserManagement },

Now Open your sidebar navigation file src/_nav.js

Add below code inside to show menu in sidenave:

import {
 ...
  cilPeople
} from '@coreui/icons'
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
....
{
  component: CNavItem,
  name: 'User Management',
  to: '/user-management',
  icon: <CIcon icon={cilPeople} customClassName="nav-icon" />,
},

Save and restart your dev server

npm run dev

Guys if you will have any kind of query then feel free to contact me.

Ajay

Thanks