Documentation

Color Admin

“NextJS 15 Version” Documentation by “Sean Ngu” v5.5.0

15.x

Updated on: 12/March/2025
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 step to install the Next.js in your localhost
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_nextjs
npm install

<!-- Start the development server -->
npm run dev

<!-- Build the project -->
npm run build


<!-- 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.

B) File Structure - top

File structure overview for Next.js Version

template_nextjs/
├── eslint.config.mjs        # ESLint configuration
├── next-env.d.ts            # Next.js TypeScript environment declaration
├── next.config.ts           # Next.js configuration file
├── package.json             # Project dependencies and scripts
├── README.md                # Project documentation
├── tsconfig.json            # TypeScript configuration
├── public/                  # Public assets (e.g., images, fonts)
└── src/                     # Source code
    ├── global.d.ts          # Global TypeScript declarations
    ├── app/                 # Next.js app directory (e.g., routing, pages)
    ├── components/          # Reusable UI components
    ├── composables/         # Custom hooks or composable utilities
    ├── config/              # Global application configurations
    ├── styles/              # HUD scss styles
    └── utils/               # Utility functions

C) Page Structure - top

Below is the code from /app/layout.tsx which include the header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

'use client';

// css
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@fortawesome/fontawesome-free/css/all.css';
import 'react-perfect-scrollbar/dist/css/styles.css';
import '@/styles/nextjs.scss';

import { useEffect, useCallback } from 'react';
import Header from '@/components/header/header';
import TopMenu from '@/components/top-menu/top-menu';
import Sidebar from '@/components/sidebar/sidebar';
import SidebarRight from '@/components/sidebar-right/sidebar-right';
import ThemePanel from '@/components/theme-panel/theme-panel';
import { AppSettingsProvider, useAppSettings } from '@/config/app-settings';

function Layout({ children }: { children: React.ReactNode }) {
  const { settings } = useAppSettings();
  
  const handleScroll = useCallback(() => {
    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
      const totalScroll = window.scrollY;
      const elm = document.querySelector('.app');
      
      if (elm) {
        if (totalScroll > 0) {
          elm.classList.add('has-scroll');
        } else {
          elm.classList.remove('has-scroll');
        }
      }
    }
  }, []);
  
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', handleScroll);
    }

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    <div className={
      'app ' +
      (settings.appBoxedLayout ? 'app-boxed-layout ' : '') + 
      (settings.appContentFullHeight ? 'app-content-full-height ' : '') + 
      (settings.appHeaderNone ? 'app-without-header ' : '') +  
      (settings.appHeaderFixed && !settings.appHeaderNone ? 'app-header-fixed ' : '') + 
      (settings.appSidebarWide ? 'app-with-wide-sidebar ' : '') + 
      (settings.appSidebarTwo ? 'app-with-two-sidebar ' : '') + 
      (settings.appSidebarEnd ? 'app-with-end-sidebar ' : '') + 
      (settings.appSidebarHover ? 'app-with-hover-sidebar ' : '') + 
      (settings.appSidebarEndToggled ? 'app-sidebar-end-toggled ' : '') + 
      (settings.appSidebarEndMobileToggled ? 'app-sidebar-end-mobile-toggled ' : '') + 
      (settings.appSidebarNone ? 'app-without-sidebar ' : '') + 
      (settings.appSidebarFixed ? 'app-sidebar-fixed ' : '') + 
      (settings.appSidebarMinified ? 'app-sidebar-minified ' : '') + 
      (settings.appSidebarMobileToggled ? 'app-sidebar-mobile-toggled' : '') +
      (settings.appFooter ? 'app-footer-fixed ' : '') + 
      (settings.appTopMenu ? 'app-with-top-menu ' : '') + 
      (settings.appGradientEnabled ? 'app-gradient-enabled ' : '')
    }>
      {settings.appTopMenu && (<TopMenu />)}
      {!settings.appHeaderNone && (<Header />)}
      {!settings.appSidebarNone && (<Sidebar />)}
      {!settings.appContentNone && (<div className={'app-content '+ settings.appContentClass }>{children}</div>)}
      {settings.appSidebarTwo && (<SidebarRight />)}
      {settings.appContentNone && (<>{children}</>)}
      <ThemePanel />
    </div>
  );
}


export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
  useEffect(() => {
    let isMounted = true;

    const loadBootstrap = async () => {
      try {
        const bootstrap = await import('bootstrap');
        if (isMounted) {
          window.bootstrap = bootstrap;
        }
      } catch (error) {
        console.error('Error loading Bootstrap:', error);
      }
    };
  
    if (typeof window !== 'undefined') {
      loadBootstrap();
    }
  
    return () => {
      isMounted = false;
    };
  }, []);
  
  return (
    <html lang="en">
      <head>
        <title>Color Admin | Nextjs Version</title>
      </head>
      <body>
        <AppSettingsProvider>
          <Layout>{children}</Layout>
        </AppSettingsProvider>
      </body>
    </html>
  );
}

D) Components - top

List of components inside the components folder

components/
├── card/
├── content/
├── footer/
├── header/
├── nav-scroll-to/
├── panel/
├── sidebar/
├── sidebar-right/
├── theme-panel/
└── top-menu/

E) Page Config - top

Example of how to change page options in single page

'use client';

import { useEffect } from 'react';
import { useAppSettings } from '@/config/app-settings';

export default function LayoutFullWidth() {
  const { updateSettings } = useAppSettings();
  
  useEffect(() => {
    updateSettings({ appSidebarNone: true });
    
    return function cleanUp() {
      updateSettings({ appSidebarNone: false });
    }
    // eslint-disable-next-line
  }, []);
  return (
    <>
    </>
  )
}

List of default options can be set in /config/app-settings.tsx:

const defaultSettings: AppSettings = {
  appTheme: '',
  appBoxedLayout: false,
  appContentClass: '',
  appContentFullHeight: false,
  appContentNone: false,
  appHeaderNone: false,
  appHeaderFixed: true,
  appHeaderInverse: false,
  appHeaderMegaMenu: false,
  appHeaderLanguageBar: false,
  appSidebarWide: false,
  appSidebarTwo: false,
  appSidebarHover: false,
  appSidebarEnd: false,
  appSidebarEndToggled: false,
  appSidebarEndMobileToggled: false,
  appSidebarSearch: false,
  appSidebarFixed: true,
  appSidebarGrid: false,
  appSidebarNone: false,
  appSidebarMobileToggled: false,
  appSidebarMinified: false,
  appSidebarInverse: true,
  appSidebarLight: false,
  appSidebarTransparent: false,
  appFooter: false,
  appTopMenu: false,
  appTopMenuMobileToggled: false,
  appGradientEnabled: false
};

List of options can be used in single page:

updateSettings({
  appTheme: '',
  appBoxedLayout: false,
  appContentClass: '',
  appContentFullHeight: false,
  appContentNone: false,
  appHeaderNone: false,
  appHeaderFixed: true,
  appHeaderInverse: false,
  appHeaderMegaMenu: false,
  appHeaderLanguageBar: false,
  appSidebarWide: false,
  appSidebarTwo: false,
  appSidebarHover: false,
  appSidebarEnd: false,
  appSidebarEndToggled: false,
  appSidebarEndMobileToggled: false,
  appSidebarSearch: false,
  appSidebarFixed: true,
  appSidebarGrid: false,
  appSidebarNone: false,
  appSidebarMobileToggled: false,
  appSidebarMinified: false,
  appSidebarInverse: true,
  appSidebarLight: false,
  appSidebarTransparent: false,
  appFooter: false,
  appTopMenu: false,
  appTopMenuMobileToggled: false,
  appGradientEnabled: false
});

F) Page Menu - top

File to configure the page sidebar menu

config/
└── app-menu.tsx

Below is the sidebar structures with two level support

const Menu = [
  { is_header: true, title: 'Navigation' },
  { path: '/email', icon: 'fa fa-hdd', title: 'Email',
    children: [
      { path: '/email/inbox', title: 'Inbox' }, 
      { path: '/email/compose', title: 'Compose' }, 
      { path: '/email/detail', title: 'Detail' }
    ]
  }
];

export default Menu;

G) Theme Color - top

The default theme color is set to the teal color. You may change it from /src/styles/default/_variables.scss 

// LINE 114
$theme:        $teal !default;

Besides that, you can also set the theme color by adding the css class theme-{ color-name } to /src/app/layout.tsx 

// LINE 107
<body className="theme-blue">
***IMPORTANT***
You might need to remove the <ThemePanel /> component from /src/app/layout.tsx.

This is because app-theme-panel will store a localStorage variable and append the theme class automatically when page load if you have select any theme color before from theme panel.

H) Dark Mode - top

Enable dark mode from template_nextjs/src/app/layout.tsx.

...
<html lang="en" data-bs-theme="dark">   // LINE 103
...

I) Switch Design - top

Apple Design

  1. Change the variable from template_nextjs/src/styles/nextjs.scss.
    @import 'apple/styles';
  2. Add the following script to template_nextjs/src/app/layout.tsx.
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div className="menu-icon">
  <ion-icon name="pulse-outline" className="bg-gradient-blue"></ion-icon>
</div>

Facebook Design

  1. Change the variable from template_nextjs/src/styles/nextjs.scss.
    @import 'facebook/styles';
  2. Change the following variable from template_nextjs/src/config/app-settings.tsx.
    ...
appHeaderInverse: true,   // LINE 50
...

Transparent Design

  1. Change the variable from template_nextjs/src/styles/nextjs.scss.
    @import 'transparent/styles';
  2. Add the .app-cover next to the <body> tag in template_react/src/app/layout.tsx.
    <body>
  <!-- BEGIN page-cover -->
  <div className="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the variable from template_nextjs/src/styles/nextjs.scss.
    @import 'google/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div className="menu-icon">
  <i className="material-icons">home</i>
</div>
  3. Change the following variable from template_nextjs/src/config/app-settings.tsx.
    ...
appSidebarWide: true,    // LINE 53
appSidebarLight: true,   // LINE 66
...
  4. Add the navbar desktop toggler to the .app-header in template_react/src/components/header.tsx.
    <!-- BEGIN #header -->
<div id="header" className="app-header">
  <!-- BEGIN navbar-header -->
  <div className="navbar-header">
    <button type="button" className="navbar-desktop-toggler">
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
    </button>
    <button type="button" className="navbar-mobile-toggler">
      ...
    </button>
    <a className="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the variable from template_nextjs/src/styles/nextjs.scss.
    @import 'material/styles';
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div className="menu-icon">
  <i className="material-icons">home</i>
</div>
  3. Change the following variable from template_nextjs/src/config/app-settings.tsx.
    ...
appSidebarWide: true,    // LINE 53
...
  4. Add the navbar desktop toggler to the .app-header in template_nextjs/src/components/header/header.tsx.
    <!-- BEGIN #header -->
<div id="header" className="app-header">
  <!-- BEGIN navbar-header -->
  <div className="navbar-header">
    <button type="button" className="navbar-desktop-toggler">
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
    </button>
    <button type="button" className="navbar-mobile-toggler">
      ...
    </button>
    <a className="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_nextjs/src/components/header/header.tsx AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" className="app-header">
  <!-- BEGIN header-nav -->
  <div className="navbar-nav">
    <div className="navbar-item">
      <a href="#" className="navbar-link icon">
        <i className="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div className="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div className="navbar-floating-form">
    <button className="search-btn" type="submit"><i className="material-icons">search</i></button>
    <input type="text" className="form-control" placeholder="Search Something..." />
    <a href="#" className="close">
      <i className="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_nextjs/public/index.html.
    <!-- BEGIN #loader -->
<div id="loader" className="app-loader">
  <div className="material-loader">
    <svg className="circular" viewBox="25 25 50 50">
      <circle className="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div className="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

J) Using SCSS - top

Now Vue.js version is fully scss configured. You may switch the Color Admin theme by changing the file /template_nextjs/src/styles/nextjs.scss.

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

K) 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/@ng-bootstrap/ng-bootstrap 

{
  "name": "color-admin",
  "version": "5.5.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.7.2",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@iconify/react": "^5.2.0",
    "@mona-health/react-input-mask": "^3.0.3",
    "@react-google-maps/api": "^2.20.6",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^4.4.8",
    "datatables.net-bs5": "^2.2.2",
    "datatables.net-buttons-bs5": "^3.2.2",
    "datatables.net-fixedcolumns-bs5": "^5.0.4",
    "datatables.net-react": "^1.0.0",
    "datatables.net-responsive-bs5": "^3.0.4",
    "flag-icons": "^7.3.2",
    "jquery": "^3.7.1",
    "jsvectormap": "^1.6.0",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "next": "15.2.2",
    "photoswipe": "^5.4.4",
    "quill": "^2.0.3",
    "react": "^19.0.0",
    "react-apexcharts": "^1.7.0",
    "react-bootstrap-daterangepicker": "^8.0.0",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.6",
    "react-datepicker": "^8.2.0",
    "react-datetime": "^3.3.1",
    "react-dom": "^19.0.0",
    "react-highlight": "^0.15.0",
    "react-notifications-component": "^4.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-quill-new": "^3.3.3",
    "react-select": "^5.10.1",
    "react-tag-input-component": "^2.0.2",
    "sass": "1.63.6",
    "simple-line-icons": "^2.5.5"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/bootstrap": "^5.2.10",
    "@types/datatables.net-buttons": "^2.2.3",
    "@types/masonry-layout": "^4.2.8",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-color": "^3.0.13",
    "@types/react-dom": "^19",
    "@types/react-highlight": "^0.12.8",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "typescript": "^5"
  },
  "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"
    }
  }
}