@materialui-reactjs/admin

A React component and utility library for building modern admin applications, including admin dashboards, CRUD interfaces, data tables, forms, charts, navigation, and reusable layouts.

The package provides multiple subpath exports so applications can import only the feature groups they need. It is designed to provide a consistent and reusable architecture for React-based admin systems.

Features

• Reusable admin dashboard components
• CRUD components for list, detail, update, and import workflows
• Form components for common and advanced input scenarios
• File and image upload components
• Data tables, pagination, search, tabs, and modal components
• Sidebar and top navigation components
• ECharts-based chart components
• Loading and spinner components
• API and data-handling helpers
• Environment configuration utilities
• Routing and validation helpers
• Drag-and-drop and sortable components
• CKEditor integration
• React Select integration
• MUI Date and Time Picker integration
• Redux Toolkit integration
• Bootstrap and MUI based UI components

Package Structure

The package exposes different feature groups through subpath exports:

| Import Path | Description | | -------------------------------------- | -------------------------------------------------------------------------- | | @materialui-reactjs/admin | Main exports for commonly used components | | @materialui-reactjs/admin/form | Form fields, form builders, and upload components | | @materialui-reactjs/admin/hook | Hooks and helpers for list, detail, update, and import workflows | | @materialui-reactjs/admin/utils | API, routing, environment, validation, and utility helpers | | @materialui-reactjs/admin/meta | Tables, tabs, pagination, modals, headers, search, and other UI components | | @materialui-reactjs/admin/sidebar | Sidebar navigation | | @materialui-reactjs/admin/single | Single-resource CRUD components | | @materialui-reactjs/admin/top-navbar | Top navigation | | @materialui-reactjs/admin/echarts | ECharts components | | @materialui-reactjs/admin/loader | Loading and spinner components |

Main Components

Form Components

The form package provides reusable components for building complex admin forms.

• AdvancedMultiSelect
• AsxhUImages
• BoxAddRow
• CheckTreeBox
• CusForm
• DateInput
• DateTimeInput
• Editor
• EfFile
• EfImage
• EfImages
• PImage
• SelectAddRowBox
• SelectAddRowBoxAdvanced
• SelectBox
• UDragFile
• UFile
• UFiles
• UImages

These components support:

• Standard form inputs
• Select and multi-select fields
• Tree-based selection
• Date and time inputs
• Rich text editing
• File uploads
• Image uploads
• Dynamic form rows
• Drag-and-drop file handling

Meta UI Components

The meta package contains reusable UI components for admin pages.

• BtnGroup
• CardTable
• CusTooltip
• ElfinderModal
• Error403
• Error404
• Head
• HeaderDetail
• HeaderIndex
• HeaderUpdate
• ModalForm
• Navtabs
• Pagination
• PDFEmbed
• ScrollTable
• SearchBox
• SortableItem

These components can be used to build:

• Index pages
• Detail pages
• Update pages
• Data tables
• Search interfaces
• Pagination
• Navigation tabs
• Modal forms
• Page headers
• Error pages
• Scrollable tables

Single-Page CRUD Components

The single package provides reusable components for building CRUD pages around a single resource.

• List
• Detail
• Update
• UpdateDetail
• UpdateTableDetail
• Import
• Fields

A typical resource can be structured as:

Resource
├── List
├── Detail
├── Update
└── Import

This structure is useful for applications that use a consistent CRUD architecture across multiple resources.

Layout Components

Sidebar

The sidebar package provides navigation components for admin dashboards.

import { Sidebar } from "@materialui-reactjs/admin/sidebar";

It also exports:

• MenuItem
• SidebarProps

Top Navbar

The top navigation component provides the main navigation header for an admin application.

import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";

ECharts Components

The echarts package provides reusable chart components based on ECharts.

• BarChart
• LineChart
• MultiBarChart
• MultiLineChart
• PieChart

Example:

import { BarChart } from "@materialui-reactjs/admin/echarts";

export default function DashboardChart() {
  return <BarChart />;
}

Loader

The loader package provides loading indicators.

• SpinnerLoader

Example:

import { SpinnerLoader } from "@materialui-reactjs/admin/loader";

export default function Loading() {
  return <SpinnerLoader />;
}

Hooks

The hook package provides reusable helpers for common admin data workflows.

Available helpers include:

• fetchHookData
• handleHookClickPage
• handleHookSeachForm
• handleHookChange
• convertQueryToSort
• convertSortToQuery

These helpers can be used to standardize:

• API data loading
• Pagination
• Search
• Sorting
• Form changes
• List/detail/update workflows

Example:

import {
  fetchHookData,
  handleHookClickPage,
  handleHookChange,
} from "@materialui-reactjs/admin/hook";

Utilities

The utils package provides common utilities for admin applications.

Available utilities include:

• callFetchApi
• callFetchApiToken
• createQueryString
• loadEnv
• getEnv
• CusRoute

Example:

import {
  callFetchApi,
  callFetchApiToken,
  createQueryString,
} from "@materialui-reactjs/admin/utils";

Installation

Install the package using npm:

npm install @materialui-reactjs/admin

Or using yarn:

yarn add @materialui-reactjs/admin

Or using pnpm:

pnpm add @materialui-reactjs/admin

Basic Usage

Components can be imported directly from their corresponding subpath.

import { Sidebar } from "@materialui-reactjs/admin/sidebar";
import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";
import { CardTable } from "@materialui-reactjs/admin/meta";
import { CusForm } from "@materialui-reactjs/admin/form";

export default function AdminLayout() {
  return (
    <>
      <TopNavbar />
      <Sidebar />
      <CardTable />
      <CusForm />
    </>
  );
}

Import by Feature Group

Form

import {
  CusForm,
  DateInput,
  DateTimeInput,
  SelectBox,
} from "@materialui-reactjs/admin/form";

Meta

import {
  CardTable,
  Pagination,
  SearchBox,
  ModalForm,
} from "@materialui-reactjs/admin/meta";

Sidebar

import { Sidebar } from "@materialui-reactjs/admin/sidebar";

Top Navbar

import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";

ECharts

import {
  BarChart,
  LineChart,
  PieChart,
} from "@materialui-reactjs/admin/echarts";

Loader

import { SpinnerLoader } from "@materialui-reactjs/admin/loader";

Utilities

import {
  callFetchApi,
  callFetchApiToken,
  loadEnv,
  getEnv,
} from "@materialui-reactjs/admin/utils";

Styles and CSS

The package provides CSS files for its components.

Import the main stylesheet:

import "@materialui-reactjs/admin/style.css";

Some component groups may also import their own internal CSS automatically.

Make sure your application's build configuration supports CSS imports from npm packages.

Dependencies

This package is built with and integrates with the following libraries.

UI and Styling

| Package | Purpose | | --------------------- | --------------------------------------------- | | @mui/material | Material UI components and UI system | | @mui/x-date-pickers | Date and time picker components for MUI | | @emotion/react | Emotion styling engine | | @emotion/styled | Styled components powered by Emotion | | bootstrap | CSS framework and responsive layout utilities |

React and State Management

| Package | Purpose | | -------------------- | ------------------------------- | | react | Core React library | | react-dom | React DOM rendering | | @reduxjs/toolkit | Redux state management | | react-redux | React bindings for Redux | | react-router-dom | Client-side routing | | react-helmet-async | Managing document head metadata |

Form and Editor

| Package | Purpose | | --------------------------- | ---------------------------------- | | @ckeditor/ckeditor5-react | CKEditor React integration | | react-select | Select and multi-select components | | date-fns | Date manipulation and formatting | | decimal.js | Precise decimal calculations |

Drag and Drop / Sorting

| Package | Purpose | | -------------------- | ------------------------------------ | | @dnd-kit/sortable | Sortable drag-and-drop functionality | | @dnd-kit/utilities | Utilities for dnd-kit | | @hello-pangea/dnd | Drag-and-drop components for React | | react-sortablejs | React integration for SortableJS | | sortablejs | Drag-and-drop sorting engine |

Charts

| Package | Purpose | | ------------------- | -------------------------------------- | | echarts | Charting and data visualization engine | | echarts-for-react | React wrapper for ECharts |

Utilities and Notifications

| Package | Purpose | | --------------------------- | ---------------------------------------------------- | | jquery | DOM manipulation and third-party library integration | | sweetalert2 | Alerts, confirmations, and notifications | | sweetalert2-react-content | React integration for SweetAlert2 |

Requirements

The package is designed for modern React applications.

Current core versions include:

• React 19.2.x
• React DOM 19.2.x
• React Router 7.x
• MUI 9.x
• MUI X Date Pickers 9.x
• Redux Toolkit 2.x
• Bootstrap 5.x
• ECharts 6.x

For the exact versions used by a particular release, check the package's package.json.

License

MIT