NobleUI - React Admin Dashboard Template v 1.0

Thank you for purchasing NobleUI - React Admin Dashboard Template. If you have any questions that are beyond the scope of this documentation, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

Introduction

React is a JavaScript library for building user interfaces, particularly single-page applications. This template is built on Bootstrap and React-Bootstrap, the most popular CSS framework for developing responsive, mobile-first websites. It extends Bootstrap components and includes custom components.

This project uses Vite, a modern build tool that provides an extremely fast development server and optimized builds. Vite offers instant hot module replacement (HMR), lightning-fast cold starts, and out-of-the-box support for TypeScript, JSX, CSS, and more.

What's include

NobleUI - React comes with a simple and logically organized file structure for easy to understand and maintainability.

  NobleUI-React/
  ├── template
              ├── demo1/                           ( Vertical Menu Layout )
                          ├── public/
                                      ├── data/
                                      ├── images/
                                      ├── favicon.png
                          ├── src/
                                      ├── assets/
                                      ├── auth/
                                      ├── components/
                                      ├── config/
                                      ├── contexts/
                                      ├── hooks/
                                      ├── layouts/
                                      ├── mock/
                                      ├── pages/
                                                  ├── dashboard/
                                                              ├── components/
                                                              ├── DashboardPage.tsx
                                                  ├── [other-pages]/
                                      ├── routes/
                                      ├── styles/
                                      ├── types/
                                      ├── utils/
                                      ├── App.tsx
                                      ├── main.tsx
                                      ├── vite-env.d.ts
                          ├── .gitignore
                          ├── .prettierrc
                          ├── eslint.config.js
                          ├── index.html
                          ├── package-lock.json
                          ├── package.json
                          ├── README.md
                          ├── tsconfig.json
                          ├── tsconfig.node.json
                          ├── vite-rtlcss-plugin.js
                          ├── vite.config.js
              ├── demo2/                            ( Horizontal Menu Layout - Coming Soon )
  ├── documentation

Set up the Development Environment

Ensure that you have Node.js LTS version installed on your machine.

Installation Steps

Assuming your machine meets all the requirements - let's proceed to the installation.

1. Open the project folder (demo1) in your code editor (VSCode, Sublime Text, etc.)

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Then go to http://127.0.0.1:5173 to view the app.

RTL Layout

The RTL does not enabled by default. It can be easily setup with RTLCSS.

Follow these steps to generate RTL CSS:

1. Open [nobleui-react]/template/[demo]/ folder. Example "demo1"

2. Uncomment the following two lines in vite.config.js (around lines 4 and 11).

import { rtlcssPlugin } from './vite-rtlcss-plugin';

rtlcssPlugin(),

3. Run npm script command to compile assets.

npm run build

You can find the bundled RTL CSS file at: [demo]/src/styles/rtl-css/styles.rtl.css.

4. Open the main.tsx file from [demo]/src/main.tsx. Change the file path to the RTL CSS path:

From: import './styles/styles.scss';
To: import './styles/rtl-css/styles.rtl.css';

5. Start the development server:

npm run dev

Then go to http://127.0.0.1:5173 to view the app.

Dark Sidebar

The Dark sidebar (in Demo1) is not enabled by default.

Add class to the body element as given below (in the index.html file).

For the dark sidebar (in Demo1), set class="sidebar-dark" on the body element.

<body class="sidebar-dark">

Support

We're happy to help! If you have any questions, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

If you enjoyed using our product, we'd really appreciate it if you could take a moment to ⭐️⭐️⭐️⭐️⭐️ rating and a short review. Your support means a lot to us! You can submit your review on the ThemeForest Downloads page.