Nexora Documentation

Welcome to Nexora, a premium multipurpose admin dashboard template crafted for modern web applications. This documentation will guide you through every aspect of the template, from installation to advanced customization.

What is Nexora?

Nexora is a complete, production-ready admin dashboard template built with clean HTML5, modern CSS3, and vanilla JavaScript. It is designed for developers and businesses who need a professional, enterprise-grade interface without the overhead of heavy frameworks like React or Vue.

The template includes 10 fully-designed pages covering everything from dashboards and analytics to user management, file handling, and settings. Every page is fully responsive, supports light and dark themes, and follows accessibility best practices.

Features

Nexora comes packed with features designed for real-world admin applications.

File Structure

After extracting the download package, you will find the following folder structure:

Installation

Getting Nexora up and running takes less than 5 minutes. Follow these simple steps:

Step 1: Extract the Package

Unzip the downloaded file to your desired location. You will get a folder named nexora.

Step 2: Open the Files

You can open the HTML files directly in any modern web browser, or serve them through a local web server for the best experience.

# Navigate to the project folder
cd nexora

# Option A: Use Python's built-in server
python -m http.server 8000

# Option B: Use Node.js http-server
npx http-server -p 8000

# Option C: Use VS Code Live Server extension
# Right-click index.html and select "Open with Live Server"

Step 3: Access the Dashboard

Open your browser and navigate to http://localhost:8000. You should see the Nexora dashboard.

Step 4: Deploy to Production

Upload all files to your web server via FTP, SFTP, or your preferred deployment method. Nexora is a static template and works on any web host including shared hosting, VPS, or CDN services.

System Requirements

CDN Libraries Used

Nexora loads the following libraries via CDN. Make sure your server has internet access or host them locally:

HTML Structure

Every page in Nexora follows a consistent, semantic structure. Understanding this layout is key to customization.

Base Template

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <!-- Meta tags, title, CDN links, style.css -->
</head>
<body>
  <div class="app-wrapper">

    <!-- 1. SIDEBAR -->
    <aside class="sidebar">...</aside>
    <div class="sidebar-overlay"></div>

    <!-- 2. MAIN CONTENT -->
    <div class="main-content">

      <!-- 2a. NAVBAR -->
      <header class="navbar">...</header>

      <!-- 2b. PAGE CONTENT -->
      <main class="page-content">
        <!-- Your page content goes here -->
      </main>

      <!-- 2c. FOOTER -->
      <footer class="app-footer">...</footer>

    </div>
  </div>

  <!-- CDN scripts + script.js -->
</body>
</html>

Key Layout Classes

CSS Architecture

The style.css file is organized into 30 clearly-labeled sections. Every color, spacing, and shadow is controlled by CSS variables.

Section Overview

Theme System

Nexora uses a powerful CSS variable-based theme system that supports instant switching between light and dark modes.

How It Works

The theme is controlled by the data-theme attribute on the <html> element. The JavaScript toggles this attribute and saves the preference to localStorage.

/* Light theme (default) */
:root {
  --bg-body: #F9FAFB;
  --bg-card: #FFFFFF;
  --text-primary: #111827;
  --border-color: #E5E7EB;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-body: #1F2937;
  --bg-card: #111827;
  --text-primary: #F9FAFB;
  --border-color: #374151;
}

Color Palette

Changing the Brand Color

To change Nexora's primary brand color, edit these two lines in style.css:

:root {
  --primary: #6366F1;      /* Change this */
  --primary-hover: #4F46E5; /* And this */
}

JavaScript

The script.js file is organized into modular components wrapped in an IIFE (Immediately Invoked Function Expression) to avoid polluting the global scope.

Module Overview

Using Toast Notifications

You can trigger toast notifications from anywhere in your code:

// Show a success toast
Toast.show('User created successfully!', 'success');

// Show an error toast
Toast.show('Something went wrong', 'danger');

// Available types: 'primary', 'success', 'warning', 'danger'

Data Attributes API

Nexora uses data attributes for declarative JavaScript behavior. This keeps your HTML clean and your JS unobtrusive.

Customization Guide

Nexora is designed to be highly customizable. Here are the most common customizations you may want to make.

Changing the Logo

Find the sidebar logo in each HTML file (search for sidebar-logo) and replace the icon with your own image:

<div class="logo-icon">
  <img src="assets/img/logo.svg" alt="Nexora" style="width: 24px;">
</div>
<span class="logo-text">Your Brand</span>

Adding a New Sidebar Link

Add a new navigation item inside .sidebar-nav:

<a href="new-page.html" class="nav-item">
  <i class="fas fa-rocket"></i>
  <span class="nav-label">New Page</span>
</a>

Changing the Font

To use a different Google Font, update the import in style.css section 1:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font-family: 'Inter', sans-serif;
}

Adjusting Border Radius

All border radii are controlled by CSS variables. To make the design more angular or more rounded:

:root {
  --radius-sm: 4px;   /* Smaller = more angular */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;  /* Larger = more rounded */
}

Buttons

Nexora provides a comprehensive button system with multiple variants and sizes.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline">Outline</button>

Sizes

Add .btn-sm or .btn-lg to change button size:

Cards

Cards are the primary container component in Nexora. They come in two main types: generic cards and stat cards.

Generic Card

<div class="card">
  <div class="card-header">
    <h3>Card Title</h3>
  </div>
  <div class="card-body">
    Card content goes here.
  </div>
  <div class="card-footer">
    Optional footer
  </div>
</div>

Stat Card

Used on dashboard pages to display key metrics with change indicators:

<div class="stat-card">
  <div class="stat-card-header">
    <p class="stat-card-label">Total Revenue</p>
    <div class="stat-card-icon primary">
      <i class="fas fa-dollar-sign"></i>
    </div>
  </div>
  <h2 class="stat-card-value">$68,420</h2>
  <span class="stat-card-change positive">
    <i class="fas fa-arrow-up"></i> 12.5%
  </span>
</div>

Tables

Data tables in Nexora support sorting, live search, and responsive overflow handling.

<div class="table-wrapper">
  <div class="table-responsive">
    <table class="data-table">
      <thead>
        <tr>
          <th data-sort>Name</th>
          <th data-sort>Email</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>john@example.com</td>
          <td><span class="badge badge-success">Active</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Forms

Form elements in Nexora are styled consistently with focus states and validation support.

Text Input

<div class="form-group">
  <label class="form-label">Email Address</label>
  <input type="email" class="form-control" placeholder="you@example.com">
</div>

Toggle Switch

<div class="form-switch">
  <div>
    <div class="form-switch-label">Enable notifications</div>
    <div class="form-switch-desc">Get notified about updates</div>
  </div>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="switch-slider"></span>
  </label>
</div>

Modals

Modals are triggered via the data-modal-open attribute and closed with data-modal-close.

<!-- Trigger button -->
<button class="btn btn-primary" data-modal-open="#myModal">
  Open Modal
</button>

<!-- Modal markup -->
<div class="modal-overlay" id="myModal">
  <div class="modal">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <button class="modal-close" data-modal-close>
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="modal-body">
      Modal content here.
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" data-modal-close>Cancel</button>
      <button class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

Badges

Badges are used to display status indicators throughout the template.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>

Pages Overview

Nexora includes 10 carefully designed pages, each serving a specific purpose in a typical admin workflow.

Charts

Nexora uses Chart.js 4.x for all data visualization. Charts automatically adapt to theme changes.

Available Charts

• Revenue Chart (Dashboard) - Area chart with gradient fill
• Activity Chart (Dashboard) - Bar chart for weekly users
• Traffic Trends (Analytics) - Multi-line chart
• Device Breakdown (Analytics) - Pie chart
• Traffic Sources (Analytics) - Doughnut chart

Adding a New Chart

<div class="chart-container">
  <canvas id="myNewChart"></canvas>
</div>

const ctx = document.getElementById('myNewChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: 'Sales',
      data: [10, 20, 15],
      borderColor: '#6366F1'
    }]
  }
});

Icons

Nexora uses FontAwesome 6 Free, which includes over 2,000 icons.

Usage

<i class="fas fa-home"></i>         <!-- Solid icon -->
<i class="far fa-user"></i>         <!-- Regular icon -->
<i class="fab fa-twitter"></i>      <!-- Brand icon -->

Browse Icons

Visit the official FontAwesome gallery to browse all available icons:

fontawesome.com/icons

Credits & Third-Party Libraries

Nexora is built on top of these amazing open-source projects. We thank their authors for their incredible work.

Changelog

v2.4.1 Latest

Released: August 29, 2026

• Initial public release of Nexora
• 10 fully-designed pages
• Light and dark theme support
• Responsive design for all screen sizes
• Chart.js integration with theme-aware colors
• Complete documentation

v2.4.0 (Upcoming)

Planned: Q4 2026

• E-commerce page templates
• Authentication pages (Login, Register, Forgot Password)
• Error pages (404, 500, Maintenance)
• RTL language support
• Additional chart types

Frequently Asked Questions

Can I use Nexora for commercial projects?

Yes! Depending on the license you purchase, you can use Nexora for personal and commercial projects. See the License section for details.

Do I need to know JavaScript to use Nexora?

Basic HTML and CSS knowledge is enough to customize most aspects. JavaScript is only needed if you want to add custom interactive features or connect to a backend.

Is Nexora compatible with React, Vue, or Angular?

Nexora is built with vanilla HTML, CSS, and JavaScript. You can port the design to any framework, but it is not directly compatible as a component library.

Can I remove the attribution?

Yes. The Nexora template itself does not require attribution. However, FontAwesome (used for icons) requires attribution under its CC BY 4.0 license unless you upgrade to FontAwesome Pro.

How do I update to a new version?

Download the latest version and compare the changelog. We recommend merging updates into a fresh copy of the template rather than overwriting your modified files.

Does Nexora work offline?

By default, Nexora loads libraries from CDN, which requires internet access. To use offline, download all CDN libraries locally and update the file paths in each HTML file.

Can I request custom features?

Yes! Contact our support team (see Support section) to discuss custom development or feature requests.

Support

We are here to help you get the most out of Nexora. Choose the support channel that works best for you.

License

Nexora is available under two license types. Choose the one that fits your needs.

Regular License

• Use in a single end product (personal or client)
• Free and paid end products allowed
• No resale of the template itself
• 6 months of included support

Extended License

• Use in multiple end products
• Can be used in products sold to end users (SaaS, etc.)
• 12 months of priority support
• Access to future major updates