ElaAdmin - Modern Bootstrap 5 Admin Dashboard Template

Version 3.0.0 | Released: 2025-08-07

ElaAdmin is a fully responsive, modern Bootstrap 5 Admin Dashboard Template built with Vite for optimal performance. It provides a comprehensive collection of ready-to-use components, utilities, custom pages, charts, dashboard variations, and useful widgets. This template has been completely modernized from the ground up, removing all jQuery dependencies and implementing modern ES6+ JavaScript patterns.

Live Preview

Screenshot

ElaAdmin admin dashboard template preview

Features

Core Features

Modern Build System: Powered by Vite 5 for lightning-fast HMR and optimized builds
Bootstrap 5.3: Latest Bootstrap without jQuery dependency
ES6+ JavaScript: Modern JavaScript with modules, async/await, and arrow functions
Component-Based Architecture: Reusable Handlebars templates for consistent UI
Responsive Design: Mobile-first approach, works perfectly on all devices
Dark Mode Ready: CSS custom properties support for easy theming
Performance Optimized: Code splitting, tree-shaking, and lazy loading

UI Components

Dashboard Variations: Multiple dashboard layouts for different use cases
Form Components: Basic and advanced forms with validation
Tables: Basic tables and custom DataTables implementation (no jQuery)
Charts: Chart.js 4.5 with responsive configurations
Cards: Various card styles with hover effects and animations
UI Elements: Buttons, badges, alerts, modals, progress bars, switches, and more
Icons: Font Awesome 6 with comprehensive icon sets
Maps: Google Maps and Vector Maps integration
Authentication Pages: Modern login, register, and password recovery pages
Search Functionality: Expandable search with quick links

Technical Features

No jQuery Dependency: Pure vanilla JavaScript with Bootstrap 5
Modular SCSS: Organized styles with Bootstrap customization
Dynamic Imports: Code splitting for optimal performance
LocalStorage Integration: Persistent sidebar state
API Ready: Utility functions for data fetching
Development Tools: ESLint and Prettier configured
Cross-Browser Compatible: Works on all modern browsers

What's New in Version 3.0

Major Changes

Complete Migration to Bootstrap 5: Removed all Bootstrap 4 dependencies
Vite Build System: Replaced legacy build tools with Vite for 10x faster development
jQuery Removal: Eliminated jQuery dependency, using vanilla JavaScript
ES6+ Modules: Modern JavaScript module system throughout
Handlebars Templating: Component-based architecture with reusable partials
Font Awesome 6: Updated from Font Awesome 4 to version 6
Chart.js 4.5: Latest Chart.js with improved performance

Improvements

Performance: 70% faster page loads with optimized bundles
Development Experience: Hot Module Replacement (HMR) for instant updates
Code Quality: ESLint and Prettier integration for consistent code
File Organization: Cleaner structure with /src directory for source files
Responsive Sidebar: Improved mobile navigation with overlay
Dynamic Page Loading: Lazy loading for charts and heavy components
Modern Styling: SCSS modules with @use and @forward syntax

Bug Fixes & Improvements

Fixed infinite chart sizing issues
Resolved canvas reuse errors in Chart.js
Fixed sidebar state persistence
Corrected Bootstrap migration issues
Fixed icon compatibility problems
Enhanced header with clickable logo linking to homepage
Added search icon and expandable search functionality
Fixed button text colors for better readability
Adjusted switch component spacing
Removed all console.log statements for production
Excluded test files from production build
Resolved all critical ESLint issues

System Requirements

Node.js: Version 18.0.0 or higher
npm: Version 8.0.0 or higher (comes with Node.js)
Modern Browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Quick Start

Installation

Clone the repository or download the ZIP file:

git clone https://github.com/your-repo/elaadmin.git
cd elaadmin

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser and navigate to:

http://localhost:3000

Available Scripts

# Start development server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint
npm run lint

# Format code with Prettier
npm run format

Project Structure

ElaAdmin/
├── src/                      # Source files
│   ├── js/                   # JavaScript modules
│   │   ├── main.js          # Core application entry
│   │   ├── pages/           # Page-specific scripts
│   │   └── components/      # Reusable components
│   ├── scss/                # Sass styles
│   │   ├── main.scss        # Main stylesheet
│   │   ├── _variables.scss  # Custom variables
│   │   └── components/      # Component styles
│   └── partials/            # Handlebars templates
│       ├── head.hbs         # HTML head content
│       ├── header-ela.hbs   # Top navigation
│       ├── sidebar-ela.hbs  # Sidebar navigation
│       ├── footer.hbs       # Footer component
│       └── scripts.hbs      # Script imports
├── images/                  # Static images
├── dist/                    # Production build (generated)
├── vite.config.js          # Vite configuration
├── package.json            # Project dependencies
├── CLAUDE.md               # AI assistant instructions
└── README.md               # This file

Development

Adding a New Page

Create your HTML file in the root directory:

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

Add the page to vite.config.js:

input: {
    main: resolve(__dirname, 'index.html'),
    yourpage: resolve(__dirname, 'your-page.html'),
    // ... other pages
}

Create page-specific JavaScript in /src/js/pages/ if needed
Add navigation link in /src/partials/sidebar-ela.hbs

Customizing Styles

Edit /src/scss/_variables.scss for theme customization
Add component styles in /src/scss/components/
Import new styles in /src/scss/main.scss

Working with JavaScript

All JavaScript should be written as ES6+ modules:

// src/js/pages/mypage.js
import { fetchData, formatNumber } from '../main.js';

export function initializeMyPage() {
    // Your code here
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initializeMyPage);

Building for Production

Build the project:

npm run build

Preview the build:

npm run preview

Deploy the /dist folder to your web server

The production build includes:

Minified CSS and JavaScript
Optimized images
Tree-shaken code (unused code removed)
Asset fingerprinting for cache busting
Source maps for debugging

Components

Available Pages

Dashboards

Main Dashboard (index.html)

UI Elements

Buttons (ui-buttons.html)
Badges (ui-badges.html)
Cards (ui-cards.html)
Alerts (ui-alerts.html)
Progress Bars (ui-progressbar.html)
Modals (ui-modals.html)
Switches (ui-switches.html)
Grids (ui-grids.html)
Typography (ui-typography.html)
Tabs (ui-tabs.html)

Tables

Basic Tables (tables-basic.html)
Data Tables (tables-data.html)

Forms

Basic Forms (forms-basic.html)
Advanced Forms (forms-advanced.html)

Charts

Chart.js (charts-chartjs.html)

Icons

Font Awesome (font-fontawesome.html)
Modern Icons (font-icons.html) - Font Awesome 6 & Bootstrap Icons

Maps

Google Maps (maps-gmap.html)
Vector Maps (maps-vector.html)

Other Pages

Widgets (widgets.html)
Login (page-login.html)
Register (page-register.html)
Forgot Password (pages-forget.html)

Built With

Core Technologies

Vite - Next generation frontend tooling
Bootstrap 5.3 - CSS framework
Handlebars - Templating engine
Sass - CSS preprocessor

UI Libraries

Font Awesome 6 - Icon library
Chart.js 4.5 - Charting library
DataTables - Advanced table plugin
Select2 - Select box enhancement
Flatpickr - Date picker
SweetAlert2 - Alert dialogs
Toastr - Notifications

Development Tools

ESLint - JavaScript linting
Prettier - Code formatting
Node.js - JavaScrip

ElaAdmin

Install / Use

README