Gentelella is a powerful, free-to-use Bootstrap 5 admin template that has been completely modernized with Vite, performance optimizations, and the latest web technologies. This template provides a comprehensive foundation for building admin panels, dashboards, and back-end applications.

✨ What's New in v2.1.0 (Latest Release)

⚡ jQuery-Free Core System - Complete main-core.js modernization with vanilla JavaScript
🎨 Brand-Consistent Favicon Suite - Modern favicon system with comprehensive browser support
🎯 Perfect UI Alignment - Precision vertical centering for navigation elements
🧹 Production-Ready Code - Clean console output with professional debugging
📱 Enhanced Mobile Experience - Improved touch interactions and responsive behavior
🔧 Modern DOM Utilities - Comprehensive jQuery-free DOM manipulation library

Previous Major Release: v2.0.0

🚀 Vite Build System - Lightning-fast development and optimized production builds
📦 Bootstrap 5.3.7 - Latest Bootstrap with modern design system
⚡ Performance Optimized - 90% smaller initial bundle size with smart code splitting
🔧 Modern JavaScript - ES6+ modules with dynamic imports
🎯 TypeScript Ready - Full TypeScript support available
📱 Mobile First - Responsive design optimized for all devices
🎨 Morris.js Eliminated - Complete replacement with modern Chart.js

📊 Performance Improvements

Before: 779 KB monolithic JavaScript bundle
After: 79 KB initial load + smart chunk loading
Result: 90% smaller initial bundle with 40-70% faster page loads

🚀 Quick Start

Prerequisites

Node.js (v16 or higher)
npm or yarn

Installation

# Clone the repository
git clone https://github.com/puikinsh/gentelella.git
cd gentelella

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Development Commands

# Development with hot reload
npm run dev

# Production build with optimizations
npm run build

# Preview production build locally
npm run preview

🏗️ Project Structure

gentelella/
├── production/           # HTML templates and static assets
│   ├── *.html           # 42 pre-built admin pages
│   └── images/          # Image assets
├── src/                 # Source files
│   ├── main-core.js     # Core essentials (79 KB, jQuery-free)
│   ├── main.scss        # Styles entry point
│   ├── js/              # Custom JavaScript (modernized)
│   ├── scss/            # Custom SASS files
│   ├── utils/           # Modern utility libraries
│   │   └── dom-modern.js # jQuery-free DOM manipulation
│   └── modules/         # Feature-specific modules
│       ├── charts.js    # Chart functionality (219 KB)
│       ├── forms.js     # Form enhancements (200 KB)
│       ├── tables.js    # DataTables functionality
│       └── dashboard.js # Dashboard widgets
├── dist/                # Production build output
├── vite.config.js       # Vite configuration
└── package.json         # Dependencies and scripts

🎯 Smart Loading System

The template uses intelligent code splitting with modern JavaScript:

Core Bundle (79 KB): Essential libraries with jQuery-free DOM utilities
Chart Module (219 KB): Only loads on pages with charts
Form Module (200 KB): Only loads on pages with advanced forms
Table Module: Only loads on pages with DataTables
Dashboard Module: Only loads dashboard-specific widgets

⚡ Modern JavaScript Architecture

jQuery-Free Core System

Vanilla JavaScript: All core functionality uses modern DOM APIs
Dynamic Loading: Intelligent module loading with caching and performance monitoring
Error Boundaries: Robust error handling with development debugging tools
Loading States: Visual indicators for better user experience

DOM Utilities Library

Complete jQuery Replacement: Full-featured DOM manipulation without dependencies
Animation Support: Slide, fade, and custom animations using CSS transitions
Event Management: Modern event handling with custom event support
Responsive Utilities: Mobile-first responsive behavior management

📱 Responsive Design

Built with mobile-first approach:

Phones: Optimized touch interfaces
Tablets: Adaptive layouts
Desktops: Full-featured experience
Large Screens: Enhanced productivity layouts

🛠️ Customization

Adding New Pages

Create HTML file in production/ directory
Add entry to vite.config.js input configuration
Reference appropriate modules for functionality needed

Custom Styling

// src/scss/custom.scss
.my-custom-component {
  // Your custom styles
}

Adding Features

// Load modules conditionally
if (document.querySelector('.chart-container')) {
  const charts = await loadModule('charts');
}

Modern Favicon System

The template includes a comprehensive favicon suite optimized for 2025 standards:

SVG-first approach - Sharp display across all devices and screen densities
Apple Touch Icon - Optimized for iOS devices and web apps
Android Chrome Icons - PWA-ready with multiple sizes (192x192, 512x512)
Legacy ICO support - Fallback for older browsers
Web App Manifest - Complete PWA integration with theme colors

📦 Available Components

Dashboard Features

Multiple Dashboard Layouts - 3 different dashboard designs
Widgets - Various dashboard widgets and cards
Charts - Chart.js, ECharts, Sparklines integration
Maps - Interactive world maps with jVectorMap

Form Components

Advanced Forms - Multi-step wizards, validation
Form Elements - Rich text editors, date pickers
File Upload - Drag & drop file upload with progress
Input Enhancements - Autocomplete, tags, switches

UI Elements

Tables - DataTables with sorting, filtering, pagination
Typography - Comprehensive typography system
Icons - Font Awesome 6
Media Gallery - Image gallery with lightbox
Calendar - Full-featured calendar component

Additional Pages

E-commerce - Product listings, shopping cart
User Management - Profiles, contacts, projects
Authentication - Login, registration pages
Error Pages - 403, 404, 500 error pages

🎨 Built With

Core Technologies

🚀 Vite 7.0.6 - Ultra-fast ES module build system with 90% smaller bundle size
📦 Bootstrap 5.3.6 - Latest Bootstrap with modern design system
🎨 SASS Modules - Modern CSS architecture with custom theme variables
⚡ Vanilla JavaScript - Modern DOM APIs with jQuery-free core system
🔧 Modern DOM Utilities - Custom library for jQuery-free DOM manipulation

Charts & Visualization

Chart.js 4.4.2 - Modern charting library (Morris.js completely removed)
ECharts 5.6.0 - Professional data visualization
Sparklines - Mini charts and graphs
jVectorMap - Interactive world maps

Form & UI Libraries

Select2 - Enhanced select dropdowns
Tempus Dominus - Bootstrap 5 date/time picker
Ion Range Slider - Range slider component
Switchery - iOS-style toggle switches
DataTables - Advanced table functionality

Utilities

Day.js - Lightweight date library
NProgress - Progress bars for page loading
Autosize - Auto-resizing textareas
Font Awesome 6 - Icon library

🔧 Configuration

Vite Configuration

The template includes optimized Vite configuration with:

Smart code splitting for optimal loading
Asset optimization with cache-busting
Development server with hot reload
Production builds with compression

Performance Features

Tree Shaking - Removes unused code
Code Splitting - Loads only what's needed
Caching Strategy - Optimized for browser caching

🚀 Deployment

Build for Production

npm run build

Deploy to Various Platforms

Netlify: Drag and drop the dist folder
Vercel: Connect your GitHub repository
GitHub Pages: Use the built-in GitHub Actions
Traditional Hosting: Upload dist folder contents

🤝 Contributing

We welcome contributions! To contribute:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Setup

git clone https://github.com/your-username/gentelella.git
cd gentelella
npm install
npm run dev

📚 Documentation & Demo

Live Demo - See the template in action
Component Documentation - Detailed component guide
Performance Guide - Optimization details
Componentization Plan - Future modularization

💼 Showcase Your Work

We would love to see how you use this awesome admin template. You can notify us about your site, app or service by tweeting to @colorlib. Once the list grows long enough we will write a post similar to this showcase to feature the best examples.

📦 Installation via Package Managers

# npm
npm install gentelella --save

# yarn  
yarn add gentelella

# bower (legacy)
bower install gentelella --save

🌍 Community Integrations

Gentelella has been integrated into various frameworks:

Rails - Ruby on Rails integration
Laravel - PHP Laravel boilerplate
Django - Python Django app
Angular - Angular integration
React - React implementation
Symfony - Symfony 6 integration
Yii - Yii framework integration
Flask - Python Flask app
CakePHP - CakePHP integration
Aurelia - Aurelia TypeScript integration
Gentelella RTL - Right-to-left language support

Let us know if you have done integration for this admin template on other platforms and frameworks and we'll be happy to share your work.

🎨 Other Templates and Resources by Colorlib

Free Bootstrap Admin Templates - Collection of the best free Bootstrap admin dashboard templates
Free Admin Templates - Comprehensive list of free HTML5 admin dashboard templates
Angular Templates - Popular admin templates based on Angular
WordPress Admin Templates - WordPress admin dashboard templates and plugins
WordPress Themes - Large selection of free WordPress themes
Colorlib Blog - Web design and development resources

📄 License

Gentelella is licensed under The MIT License (MIT). You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.

Attribution Required: Colorlib must be credited as the original author.

👥 Maintainers

Colorlib - Original design and development
Aigars Silkalns - Lead developer and maintainer

🙏 Acknowledgments

Bootstrap team for the amazing CSS framework
All contributors who have helped improve this template
The open-source community for the excellent libraries

Made with ❤️ by Colorlib