Documentation

Color Admin

“React 19 Version” Documentation by “Sean Ngu” v6.0.0

Updated on: 25/August/2026
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) Installation - top

Follow the following steps to install React in your local development environment.
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide 

<!-- run the following command -->
cd /your-path-url/template_react
npm install
npm run dev

<!-- browse the url -->
http://localhost:3000/

Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into react folder -->
/admin/template/template_react/public/assets/img

B) File Structure - top

File structure overview for React JS Version

template_react/
├── package.json
├── README.md
├── public/
└── src/
    ├── app.jsx
    ├── index.js
    ├── index.css
    ├── assets/ 
    ├── components/
    ├── config/
    ├── pages/
    └── scss/

C) Page Structure - top

Below is the code from app.js which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

import React, { useEffect, useState } from 'react';
import { AppSettings } from './config/app-settings.js';
import { slideToggle } from './composables/slideToggle.js';

import Header from './components/header/header.jsx';
import Sidebar from './components/sidebar/sidebar.jsx';
import SidebarRight from './components/sidebar-right/sidebar-right.jsx';
import TopMenu from './components/top-menu/top-menu.jsx';
import Content from './components/content/content.jsx';
import ThemePanel from './components/theme-panel/theme-panel.jsx';

function App() {  
  const [appTheme] = useState('');
  const [appClass, setAppClass] = useState('');
  const [appDarkMode, setAppDarkMode] = useState(false);
  const [appGradientEnabled, setAppGradientEnabled] = useState(false);
  const [appHeaderNone, setAppHeaderNone] = useState(false);
  const [appHeaderFixed, setAppHeaderFixed] = useState(true);
  const [appHeaderInverse, setAppHeaderInverse] = useState(false);
  const [appHeaderMegaMenu, setAppHeaderMegaMenu] = useState(false);
  const [appHeaderLanguageBar, setAppHeaderLanguageBar] = useState(false);
  const [hasScroll, setHasScroll] = useState(false);
  const [appSidebarNone, setAppSidebarNone] = useState(false);
  const [appSidebarWide, setAppSidebarWide] = useState(false);
  const [appSidebarLight, setAppSidebarLight] = useState(false);
  const [appSidebarMinify, setAppSidebarMinify] = useState(false);
  const [appSidebarMobileToggled, setAppSidebarMobileToggled] = useState(false);
  const [appSidebarTransparent, setAppSidebarTransparent] = useState(false);
  const [appSidebarSearch, setAppSidebarSearch] = useState(false);
  const [appSidebarFixed, setAppSidebarFixed] = useState(true);
  const [appSidebarGrid, setAppSidebarGrid] = useState(false);
  const [appContentNone, setAppContentNone] = useState(false);
  const [appContentClass, setAppContentClass] = useState('');
  const [appContentFullHeight, setAppContentFullHeight] = useState(false);
  const [appTopMenu, setAppTopMenu] = useState(false);
  const [appTopMenuMobileToggled] = useState(false);
  const [appSidebarTwo, setAppSidebarTwo] = useState(false);
  const [appSidebarEnd, setAppSidebarEnd] = useState(false);
  const [appSidebarEndToggled, setAppSidebarEndToggled] = useState(false);
  const [appSidebarEndMobileToggled, setAppSidebarEndMobileToggled] = useState(false);
  
  ...
  
  return (
    <AppSettings.Provider
      value={{
        appTheme,
        appClass,
        appDarkMode,
        appGradientEnabled,
        appHeaderNone,
        appHeaderFixed,
        ...
      }}
    >
      <div
        className={
          'app ' + (appClass ? appClass + ' ' : '') +
          (appGradientEnabled ? 'app-gradient-enabled ' : '') +
          (appHeaderNone ? 'app-without-header ' : '') +
          (appHeaderFixed && !appHeaderNone ? 'app-header-fixed ' : '') +
          (appSidebarFixed ? 'app-sidebar-fixed ' : '') +
          (appSidebarNone ? 'app-without-sidebar ' : '') +
          (appSidebarEnd ? 'app-with-end-sidebar ' : '') +
          (appSidebarWide ? 'app-with-wide-sidebar ' : '') +
          (appSidebarMinify ? 'app-sidebar-minified ' : '') +
          (appSidebarMobileToggled ? 'app-sidebar-mobile-toggled ' : '') +
          (appTopMenu ? 'app-with-top-menu ' : '') +
          (appContentFullHeight ? 'app-content-full-height ' : '') +
          (appSidebarTwo ? 'app-with-two-sidebar ' : '') +
          (appSidebarEndToggled ? 'app-sidebar-end-toggled ' : '') +
          (appSidebarEndMobileToggled ? 'app-sidebar-end-mobile-toggled ' : '') +
          (hasScroll ? 'has-scroll ' : '')
        }
      >
        {!appHeaderNone && <Header />}
        {!appSidebarNone && <Sidebar />}
        {appSidebarTwo && <SidebarRight />}
        {appTopMenu && <TopMenu />}
        {!appContentNone && <Content />}
        <ThemePanel />
      </div>
    </AppSettings.Provider>
  );
}

export default App;

D) Components - top

List of components inside the components folder

components/
├── content/
├── float-sub-menu/
├── header/
├── panel/
├── sidebar/
├── sidebar-right/
├── theme-panel/
└── top-menu/

E) Config - top

File to configure the default page options & page routes

config/
├── app-route.jsx
└── app-settings.js

Example of how to change page options in single page

import React, { useEffect, useContext } from 'react';
import { AppSettings } from './../../config/app-settings.js';

function PageWithoutSidebar() {
  const context = useContext(AppSettings);

  useEffect(() => {
    context.handleSetAppSidebarNone(true);
    
    return () => {
      context.handleSetAppSidebarNone(false);
    };
    // eslint-disable-next-line
  }, []);

  return (
  );
}

export default PageWithoutSidebar;

List of options:

context.handleSetAppClass('p-0');

context.handleSetAppHeaderNone (true);
context.handleSetAppHeaderInverse (true);
context.handleSetAppHeaderLanguageBar(true);
context.handleSetAppHeaderMegaMenu(true);
context.handleSetAppHeaderFixed(true);

context.handleSetAppSidebarNone(true);
context.handleSetAppSidebarWide (true);
context.handleSetAppSidebarLight(true);
context.handleSetAppSidebarMinified(true);
context.handleSetAppSidebarTransparent(true);
context.handleSetAppSidebarSearch(true);
context.handleSetAppSidebarFixed(true);
context.handleSetAppSidebarGrid(true);
context.handleSetAppSidebarEnd(true);
context.handleSetAppSidebarTwo(true);

context.handleSetAppContentNone(true);
context.handleSetAppContentClass('p-0');
context.handleSetAppContentFullHeight(true);

context.handleSetAppTopMenu(true);
context.handleSetAppBoxedLayout(true);
context.handleSetAppDarkMode('dark');
context.handleSetAppGradientEnabled(true);
context.handleSetAppTheme('blue');

context.toggleAppSidebarMinify();
context.toggleAppSidebarMobile();
context.toggleAppTopMenuMobile();
context.toggleAppSidebarEnd();
context.toggleAppSidebarEndMobile();

F) Dark Mode - top

Enable dark mode from template_react/src/app.jsx.

...
const [appDarkMode, setAppDarkMode] = useState(true);   // LINE 14
...

G) RTL Mode - top

Add the dir="rtl" attribute to <html> for /public/index.html in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

H) Switch Design - top

Replace the existing @import 'default/styles'; line in template_react/src/scss/react.scss with the selected theme import below, then restart the React development server.

Apple Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'apple/styles';
  2. No additional icon script is required for the current Iconify-based components.
    <!-- No additional icon script is required. -->
  3. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:pulse-bold-duotone"></iconify-icon>
</div>

Facebook Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'facebook/styles';
  2. Change the following variable from template_react/src/app.jsx.
    ...
const [appHeaderInverse, setAppHeaderInverse] = useState(true);   // LINE 18
...

Transparent Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'transparent/styles';
  2. Add the .app-cover next to the <body> tag in template_react/public/index.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'google/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Change the following variable from template_react/src/app.jsx.
    ...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
const [appSidebarLight, setAppSidebarLight] = useState(true);  // LINE 24
...
  4. Add the navbar desktop toggler to the .app-header in template_react/src/components/header/header.jsx.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin
    </a>
  </div>
  <!-- END brand -->
  ...
</div>

Material Design

  1. Change the variable from template_react/src/scss/react.scss.
    @import 'material/styles';
  2. The current component uses Iconify icons, so no additional icon-library change is required.
    <div class="menu-icon">
  <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
</div>
  3. Change the following variable from template_react/src/app.jsx.
    ...
const [appSidebarWide, setAppSidebarWide] = useState(true);    // LINE 23
...
  4. Add the navbar desktop toggler to the .app-header in template_react/src/components/header/header.jsx.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN brand -->
  <div class="brand">
    <button type="button" class="menu-toggler">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="menu-toggler">
      ...
    </button>
    <a class="brand-logo">
      Color Admin Material
    </a>
  </div>
  <!-- END brand -->
  ...
</div>
  5. Customize the existing header search form in template_react/src/components/header/header.jsx. Do not add a second search form.
    <!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="menu">
    <div class="menu-item">
      <a href="#" class="menu-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- EXISTING SEARCH FORM -->
      <div class="menu-item menu-item-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="menu-item-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_react/public/index.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

I) Using SCSS - top

The React version is fully configured with SCSS. You may switch the Color Admin theme by changing the file /template_react/src/scss/react.scss.

@import 'default/styles';
 
<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

J) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/reactstrap 

{
  "name": "color-admin",
  "version": "6.0.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-transform-private-property-in-object": "^7.27.1",
    "@fortawesome/fontawesome-free": "^7.3.1",
    "@fullcalendar/bootstrap": "^6.1.21",
    "@fullcalendar/daygrid": "^6.1.21",
    "@fullcalendar/interaction": "^6.1.21",
    "@fullcalendar/list": "^6.1.21",
    "@fullcalendar/react": "^6.1.21",
    "@fullcalendar/timegrid": "^6.1.21",
    "@mona-health/react-input-mask": "^3.0.3",
    "@react-google-maps/api": "^2.20.7",
    "apexcharts": "^6.7.1",
    "bootstrap": "^5.3.8",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-icons": "^1.13.1",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.5.0",
    "codemirror": "^6.0.2",
    "flag-icons": "^7.5.0",
    "jsvectormap": "^1.7.0",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "photoswipe": "^5.4.4",
    "quill": "^2.0.3",
    "react": "^19.2.8",
    "react-apexcharts": "^1.7.0",
    "react-bootstrap-daterangepicker": "^8.0.0",
    "react-calendar": "^6.0.0",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.6",
    "react-data-table-component": "^7.7.0",
    "react-datepicker": "^7.5.0",
    "react-datetime": "^3.3.1",
    "react-dom": "^19.2.8",
    "react-highlight": "^0.15.0",
    "react-notifications-component": "^4.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-quill-new": "^3.4.6",
    "react-router-dom": "^7.6.3",
    "react-scripts": "^5.0.1",
    "react-select": "^5.10.1",
    "react-tag-autocomplete": "^7.5.0",
    "simple-line-icons": "^2.5.5",
    "sourcemap-codec": "^1.4.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@iconify/react": "^6.0.0",
    "sass": "1.77.7"
  },
  "overrides": {
    "react-datepicker": {
      "react": ">=19.0.0",
      "react-dom": ">=19.0.0"
    },
    "react-notifications-component": {
      "react": ">=19.0.0",
      "react-dom": ">=19.0.0"
    },
    "react-tag-input-component": {
      "react": ">=19.0.0",
      "react-dom": ">=19.0.0"
    },
    "svgo": "^2.8.0",
    "rimraf": "^4.0.0",
    "glob": "^9.0.0",
    "lodash.isequal": "latest",
    "magic-string": {
      "sourcemap-codec": "@jridgewell/sourcemap-codec"
    }
  }
}