ElaAdmin Documentation

Welcome to the official documentation for ElaAdmin - a modern, responsive Bootstrap 5 admin dashboard template with over 30+ ready-to-use pages and comprehensive UI components.

Version 3.0 Release - Complete Bootstrap 5 migration with Vite 7, removal of jQuery dependency, modern ES6+ JavaScript, Handlebars templating, and significant performance improvements.

Overview

ElaAdmin is a professional admin dashboard template designed for building modern web applications. It provides a clean, intuitive interface with extensive customization options and a comprehensive set of pre-built components.

Key Technologies

🎨

Bootstrap 5.3.7

Latest Bootstrap without jQuery

⚡

Vite 7.0.6

Lightning-fast build tool

🎯

Sass 1.90.0

Modern CSS preprocessing

📱

Responsive Design

Mobile-first approach

🔧

Handlebars

Template engine

📊

Chart.js 4.5

Data visualization

What's Included

30+ Ready-to-use HTML pages
Comprehensive UI components library
Multiple dashboard variations
Authentication pages (Login, Register, etc.)
Form components with validation
Advanced data tables with export features
Multiple chart libraries integrated
Google Maps and Vector Maps
Font Awesome 7 icons
Cross-browser compatibility
Fully responsive design
Clean and commented code

Quick Start

Get ElaAdmin up and running in less than 5 minutes with these simple steps.

Option 1: Download from GitHub

Visit the GitHub repository
Click the "Code" button and select "Download ZIP"
Extract the files to your project directory
Follow the installation steps below

Option 2: Clone via Git

git clone https://github.com/puikinsh/ElaAdmin.git
cd ElaAdmin
npm install
npm run dev

Option 3: View Live Demo

Preview the template before downloading:

View Live Demo →

Installation

Detailed installation instructions for setting up ElaAdmin in your development environment.

System Requirements

Node.js: Version 18.0 or higher
npm: Version 8.0 or higher (comes with Node.js)
Git: For version control (optional)
Code Editor: VS Code, Sublime Text, or any modern editor

Installation Steps

1. Install Node.js

Download and install Node.js from nodejs.org. This will also install npm.

2. Verify Installation

# Check Node.js version
node --version

# Check npm version
npm --version

3. Install Dependencies

# Navigate to project directory
cd elaadmin

# Install all dependencies
npm install

# If you encounter issues, try:
npm install --legacy-peer-deps

4. Start Development Server

# Start Vite dev server
npm run dev

# Server will start at http://localhost:3000

Common Installation Issues

Port Already in Use: If port 3000 is busy, Vite will automatically use the next available port (3001, 3002, etc.)

Permission Errors: On macOS/Linux, you might need to use sudo npm install or fix npm permissions.

Project Structure

Understanding the organization of files and directories in ElaAdmin.

elaadmin/
│
├── src/                         # Source files
│   ├── js/                      # JavaScript files
│   │   ├── main.js             # Main entry point
│   │   └── pages/              # Page-specific scripts
│   │       ├── dashboard.js    # Dashboard functionality
│   │       ├── charts.js       # Chart configurations
│   │       ├── forms.js        # Form validations
│   │       └── ui-sweetalert.js # SweetAlert demos
│   │
│   ├── scss/                    # SCSS stylesheets
│   │   ├── main.scss           # Main stylesheet
│   │   ├── _variables.scss     # SCSS variables
│   │   └── components/         # Component styles
│   │       ├── _sidebar.scss   # Sidebar styles
│   │       ├── _header.scss    # Header styles
│   │       └── _footer.scss    # Footer styles
│   │
│   └── partials/               # Handlebars templates
│       ├── head.hbs            # HTML head section
│       ├── header-ela.hbs      # Header navigation
│       ├── sidebar-ela.hbs     # Sidebar navigation
│       ├── footer.hbs          # Footer section
│       └── scripts.hbs         # Script includes
│
├── assets/                     # Static assets
│   └── images/                 # Image files
│       ├── logo/              # Logo variations
│       └── users/             # User avatars
│
├── dist/                       # Production build (generated)
│
├── node_modules/               # Dependencies (generated)
│
├── *.html                      # HTML pages
│   ├── index.html             # Main dashboard
│   ├── charts.html            # Chart examples
│   ├── forms-basic.html       # Form components
│   ├── tables-data.html       # Data tables
│   └── ... (30+ pages)
│
├── package.json               # NPM configuration
├── package-lock.json          # Locked dependencies
├── vite.config.js            # Vite configuration
├── .gitignore                # Git ignore rules
├── CLAUDE.md                 # AI assistance guide
└── documentation.html        # This documentation

Key Directories Explained

📁 src/js/

Contains all JavaScript source files. The main.js is the entry point that initializes Bootstrap and common functionality. Page-specific scripts are in the pages/ subdirectory.

📁 src/scss/

SCSS source files for styling. Uses modern SCSS module syntax with @use and @forward. Variables and mixins are centralized for easy theming.

📁 src/partials/

Handlebars template partials for reusable components. These are automatically included during the build process to reduce code duplication.

Migration Guide

Upgrading from ElaAdmin 2.x to 3.0 or migrating from other templates.

What's Changed in v3.0

Feature	Version 2.x	Version 3.0
Bootstrap	4.x with jQuery	5.3.7 (no jQuery)
Build Tool	Gulp/Webpack	Vite 7
JavaScript	ES5 + jQuery	ES6+ Modules
Templating	Static HTML	Handlebars
Icons	Font Awesome 5	Font Awesome 7
Package Manager	npm/bower	npm only

Migration Steps

1. Update Bootstrap Classes

// Bootstrap 4 → Bootstrap 5
.ml-* → .ms-*  (margin-left to margin-start)
.mr-* → .me-*  (margin-right to margin-end)
.pl-* → .ps-*  (padding-left to padding-start)
.pr-* → .pe-*  (padding-right to padding-end)

// Data attributes
data-toggle → data-bs-toggle
data-target → data-bs-target
data-dismiss → data-bs-dismiss

2. Remove jQuery Dependencies

// Old jQuery code
$('#myButton').click(function() {
  $('#myModal').modal('show');
});

// New vanilla JavaScript
document.getElementById('myButton').addEventListener('click', function() {
  const modal = new bootstrap.Modal(document.getElementById('myModal'));
  modal.show();
});

3. Update Form Classes

// Bootstrap 4
<div class="form-group">
  <label>Email</label>
  <input class="form-control">
</div>

// Bootstrap 5
<div class="mb-3">
  <label class="form-label">Email</label>
  <input class="form-control">
</div>

Development Setup

Configure your development environment for optimal productivity.

Development Server

# Start development server with hot reload
npm run dev

# The server provides:
# - Hot Module Replacement (HMR)
# - Auto-refresh on file changes
# - Error overlay
# - Network access for mobile testing

Available NPM Scripts

Command	Description
`npm run dev`	Start development server on port 3000
`npm run build`	Build for production to dist/ folder
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint on JavaScript files
`npm run format`	Format code with Prettier

Creating New Pages

Step 1: Create HTML File

<!doctype html>
<html lang="en">
  <head>
    {{> head title="My New Page"}}
  </head>
  <body>
    <div class="wrapper">
      {{> sidebar-ela}}
      <div class="main-content">
        {{> header-ela}}
        <main class="content">
          <div class="container-fluid">
            <!-- Your content here -->
          </div>
        </main>
        {{> footer}}
      </div>
    </div>
    {{> scripts}}
  </body>
</html>

Step 2: Add Page-Specific JavaScript (Optional)

// src/js/pages/my-page.js
import Chart from 'chart.js/auto';

// Your page-specific code
document.addEventListener('DOMContentLoaded', function() {
  // Initialize components
});

Step 3: Update Scripts Partial

Add your page to the dynamic loading in src/partials/scripts.hbs if it needs specific JavaScript.

Build Process

Understanding the Vite build process and optimization techniques.

Production Build

# Create optimized production build
npm run build

# Output structure:
dist/
├── assets/
│   ├── css/
│   │   └── main-[hash].css    # Minified CSS
│   ├── js/
│   │   └── main-[hash].js     # Minified JS
│   └── images/                # Optimized images
├── index.html                  # Entry point
└── ... (other HTML files)

Build Features

Automatic code splitting for optimal loading
CSS and JavaScript minification
Asset optimization and compression
Tree shaking to remove unused code
Source maps for debugging
Cache busting with hashed filenames
Automatic vendor chunk extraction

Preview Production Build

# Build and preview
npm run build
npm run preview

# Opens at http://localhost:4173

Deployment

Deploy ElaAdmin to various hosting platforms.

Static Hosting (Recommended)

Netlify

Push your code to GitHub
Connect repository to Netlify
Set build command: npm run build
Set publish directory: dist
Deploy

Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

GitHub Pages

# Install gh-pages
npm install --save-dev gh-pages

# Add to package.json scripts:
"deploy": "npm run build && gh-pages -d dist"

# Deploy
npm run deploy

Traditional Web Hosting

Run npm run build
Upload contents of dist/ folder to your web server
Ensure your server serves index.html as the default

Layout Structure

ElaAdmin uses a flexible layout system with reusable components.

Basic Layout

<div class="wrapper">
  <!-- Sidebar -->
  <aside id="left-panel" class="left-panel">
    <!-- Navigation menu -->
  </aside>
  
  <!-- Main Content -->
  <div class="main-content">
    <!-- Header -->
    <header class="header">
      <!-- Top navigation -->
    </header>
    
    <!-- Page Content -->
    <main class="content">
      <div class="container-fluid">
        <!-- Your content -->
      </div>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
      <!-- Footer content -->
    </footer>
  </div>
</div>

Sidebar Navigation

<nav class="nav-menu">
  <!-- Single item -->
  <div class="nav-item">
    <a href="index.html" class="nav-link">
      <i class="nav-icon fas fa-home"></i>
      <span class="nav-text">Dashboard</span>
    </a>
  </div>
  
  <!-- Dropdown menu -->
  <div class="nav-item has-submenu">
    <a href="#" class="nav-link" data-menu="components">
      <i class="nav-icon fas fa-puzzle-piece"></i>
      <span class="nav-text">Components</span>
      <i class="nav-arrow fas fa-chevron-right"></i>
    </a>
    <div class="nav-submenu">
      <a href="ui-buttons.html" class="submenu-link">
        <i class="submenu-icon far fa-circle"></i>
        <span>Buttons</span>
      </a>
    </div>
  </div>
</nav>

UI Components

Comprehensive collection of pre-built UI components.

Cards

<!-- Basic Card -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Card Title</h4>
  </div>
  <div class="card-body">
    <p>Card content goes here</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Action</button>
  </div>
</div>

<!-- Statistics Card -->
<div class="card widget-card">
  <div class="card-body">
    <div class="stat-widget-five">
      <div class="stat-icon flat-color-1">
        <i class="fas fa-dollar-sign"></i>
      </div>
      <div class="stat-content">
        <div class="stat-text">$23,569</div>
        <div class="stat-heading">Revenue</div>
      </div>
    </div>
  </div>
</div>

Alerts

<!-- Dismissible Alert -->
<div class="alert alert-success alert-dismissible fade show">
  <strong>Success!</strong> Your changes have been saved.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Alert Variations -->
<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-secondary">Secondary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-warning">Warning alert</div>
<div class="alert alert-info">Info alert</div>

Buttons

<!-- Button Styles -->
<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-warning">Warning</button>
<button class="btn btn-info">Info</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>

<!-- Button with Icon -->
<button class="btn btn-primary">
  <i class="fas fa-download me-2"></i>Download
</button>

Modals

<!-- Modal Trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal content goes here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Forms

Bootstrap 5 form components with validation support.

Basic Form

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" required>
    <div class="invalid-feedback">
      Password is required.
    </div>
  </div>
  
  <div class="mb-3">
    <label for="select" class="form-label">Select Option</label>
    <select class="form-select" id="select" required>
      <option value="">Choose...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </div>
  
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree" required>
      <label class="form-check-label" for="agree">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Validation JavaScript

// Bootstrap 5 form validation
(function() {
  'use strict';
  
  // Fetch all forms with validation
  const forms = document.querySelectorAll('.needs-validation');
  
  // Loop and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      
      form.classList.add('was-validated');
    }, false);
  });
})();

Tables

Responsive tables with DataTables integration for advanced features.

Basic Table

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
        <td><span class="badge badge-success">Active</span></td>
        <td>
          <button class="btn btn-sm btn-primary">Edit</button>
          <button class="btn btn-sm btn-danger">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

DataTables Integration

// Initialize DataTable
import DataTable from 'datatables.net-bs5';

document.addEventListener('DOMContentLoaded', function() {
  const table = new DataTable('#myTable', {
    responsive: true,
    pageLength: 25,
    order: [[0, 'asc']],
    language: {
      search: "Search records:",
      lengthMenu: "Show _MENU_ entries"
    }
  });
});

Charts

Multiple chart libraries integrated for data visualization.

Chart.js Example

import Chart from 'chart.js/auto';

// Line Chart
const ctx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.4
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: 'top'
      }
    }
  }
});

Available Chart Types

Line Charts
Bar Charts
Pie & Doughnut Charts
Area Charts
Radar Charts
Polar Area Charts
Bubble Charts
Scatter Charts

Available Pages

ElaAdmin includes 30+ ready-to-use pages for various purposes.

Dashboard Pages

index.html - Main dashboard with statistics
index2.html - Alternative dashboard layout
index3.html - E-commerce dashboard
index4.html - Analytics dashboard

UI Components

ui-buttons.html - Button variations
ui-badges.html - Badges and labels
ui-tabs.html - Tabs and pills
ui-cards.html - Card components
ui-alerts.html - Alert messages
ui-progressbar.html - Progress bars
ui-modals.html - Modal dialogs
ui-switches.html - Toggle switches
ui-grids.html - Grid system
ui-typgraphy.html - Typography
ui-sweetalert.html - SweetAlert2 examples

Forms

forms-basic.html - Basic form elements
forms-advanced.html - Advanced components

Tables

tables-basic.html - Basic tables
tables-data.html - DataTables integration

Charts

charts-chartjs.html - Chart.js examples
charts-flot.html - Flot charts
charts-peity.html - Peity charts

Icons & Maps

font-fontawesome.html - Font Awesome icons
font-themify.html - Themify icons
maps-gmap.html - Google Maps
maps-vector.html - Vector maps

Other Pages

widgets.html - Widget collection
page-login.html - Login page
page-register.html - Registration page
pages-forget.html - Password recovery
pages-404.html - 404 error page

Theming

Customize ElaAdmin's appearance to match your brand.

Color Variables

// src/scss/_variables.scss

// Primary colors
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;

// Custom theme colors
$sidebar-bg: #1a1c23;
$sidebar-text: #8b92a9;
$sidebar-hover: #5a5c69;
$header-bg: #ffffff;
$header-border: #e3e6f0;

// Layout dimensions
$sidebar-width: 280px;
$sidebar-collapsed-width: 70px;
$header-height: 70px;
$footer-height: 60px;

Typography

// Font settings
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$font-weight-base: 400;
$line-height-base: 1.5;

// Headings
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;

$headings-font-weight: 600;
$headings-line-height: 1.2;
$headings-color: $dark;

Creating Custom Themes

Copy src/scss/_variables.scss to _variables-custom.scss
Modify the color values in your custom file
Update main.scss to import your custom variables
Rebuild the project with npm run build

Included Plugins

ElaAdmin comes with a comprehensive set of pre-integrated plugins.

Plugin	Version	Description	Documentation
Bootstrap	5.3.7	CSS framework	Docs
Font Awesome	7.0.0	Icon library	Docs
Chart.js	4.5.0	Charts & graphs	Docs
DataTables	2.3.2	Advanced tables	Docs
SweetAlert2	11.22.2	Beautiful alerts	Docs
Flatpickr	4.6.13	Date picker	Docs
FullCalendar	6.1.18	Event calendar	Docs
Select2	4.1.0	Enhanced selects	Docs
Toastr	2.1.4	Toast notifications	Docs

Browser Support

ElaAdmin is tested and supported on all modern browsers.

Browser	Version	Support
Chrome	Last 2 versions	✅ Full Support
Firefox	Last 2 versions	✅ Full Support
Safari	Last 2 versions	✅ Full Support
Edge	Last 2 versions	✅ Full Support
Opera	Last 2 versions	✅ Full Support
Internet Explorer	11	❌ Not Supported

Note: Internet Explorer is not supported as Bootstrap 5 has dropped IE support.

Changelog

Track the evolution of ElaAdmin through version updates.

Version 3.0.0 - August 2025

Complete migration to Bootstrap 5.3.7
Upgraded to Vite 7.0.6 build system
Removed jQuery dependency entirely
Implemented Handlebars templating
Updated to Font Awesome 7.0.0
Updated all dependencies to latest versions
Improved mobile responsiveness
Added SweetAlert2 examples page
Fixed all security vulnerabilities
Optimized bundle size by 40%

Version 2.1.0 - June 2023

Updated Bootstrap to 4.6.2
Added dark mode support
New dashboard variations
Improved chart components
Bug fixes and performance improvements

Version 2.0.0 - January 2023

Major redesign of UI components
Added new page templates
Webpack integration
SCSS architecture refactor
Cross-browser compatibility fixes

Frequently Asked Questions

Can I use ElaAdmin for commercial projects?

Yes! ElaAdmin is released under the MIT license, which allows both personal and commercial use.

Do I need to keep the footer credits?

No, you can remove or modify the footer credits as needed for your project.

Is jQuery required?

No, version 3.0 has completely removed jQuery dependency. All functionality uses vanilla JavaScript.

How do I update from version 2.x?

Check the Migration Guide section for detailed upgrade instructions.

Can I use only specific components?

Yes, the modular structure allows you to use only the components you need.

Is there TypeScript support?

Currently, ElaAdmin uses vanilla JavaScript. TypeScript support is planned for a future release.

Support

Get help when you need it.

📚 Documentation

This comprehensive guide covers all aspects of using and customizing ElaAdmin.

💬 GitHub Issues

For bug reports and feature requests, please use the GitHub Issues page.

📧 Email Support

For additional support, contact the Colorlib team through their contact page.

Useful Resources

License

ElaAdmin is open source and available under the MIT License.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Summary: You are free to use ElaAdmin in personal and commercial projects. You can modify, distribute, and even sell it as part of your product.