Modern Bootstrap 5 Admin Dashboard Template with Vite Build System
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.
- Go Pro Sidebar Link - Premium templates promotion with UTM tracking
- Sidebar Badge System - Colorful Pro, Hot, New, and Updated badges
- Avatar Redesign - Colorful circular backgrounds with white icons
- Progress Bar Fixes - Fixed invisible progress bars across dashboards
- Uppy File Upload - Replaced Dropzone.js with modern Uppy uploader
- Cross-Page Consistency - Unified sidebar menu across all 33 template pages
- Bootstrap Icons Integration - Added Bootstrap Icons for modern, minimalist sidebar navigation
- Header Navigation Rebuilt - Proper Bootstrap 5 flexbox utilities for top navigation layout
- Sidebar UI Improvements - Centered collapsed logo, right-aligned chevron arrows
- Code Quality & Cleanup - Removed legacy jQuery files, standardized naming conventions
- 126 Unit Tests - Comprehensive test coverage with Vitest framework
- CSS Variables System - New custom properties for easier theming
- Comprehensive Dependency Updates - All dependencies updated to their latest versions
- Vite 7.3.1 - Latest build system with performance improvements
- ESLint 9.39.2 - Updated linting with comprehensive browser globals configuration
- Font Awesome 7.1.0 - Latest icon library
- 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
- 🚀 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
- 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
# 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 with hot reload
npm run dev
# Production build with optimizations
npm run build
# Preview production build locally
npm run previewgentelella/
├── 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
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
- 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
- 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
Built with mobile-first approach:
- Phones: Optimized touch interfaces
- Tablets: Adaptive layouts
- Desktops: Full-featured experience
- Large Screens: Enhanced productivity layouts
- Create HTML file in
production/directory - Add entry to
vite.config.jsinput configuration - Reference appropriate modules for functionality needed
// src/scss/custom.scss
.my-custom-component {
// Your custom styles
}Gentelella includes 10 professionally designed color schemes that users can switch between at runtime. Each theme is carefully crafted for accessibility and modern aesthetics.
| Theme | Primary Color | Description | Best For |
|---|---|---|---|
| Default | Emerald #10b981 |
Modern emerald green | General purpose |
| Ocean | Sky #0ea5e9 |
Deep blue professional | Corporate, enterprise |
| Sunset | Orange #f97316 |
Warm coral/orange | Creative, marketing |
| Lavender | Violet #8b5cf6 |
Soft purple/violet | Design tools, SaaS |
| Forest | Green #22c55e |
Natural green tones | Health, environmental |
| Midnight | Cyan #22d3ee |
Dark mode optimized | Developer tools, night use |
| Rose | Pink #ec4899 |
Modern pink/magenta | Fashion, lifestyle |
| Slate | Slate #64748b |
Neutral monochrome | Content-focused apps |
| Indigo | Indigo #6366f1 |
Classic tech blue | Tech, productivity |
| Teal | Teal #14b8a6 |
Calming teal | Healthcare, wellness |
<html data-theme="ocean"><body class="theme-ocean">// Set theme
function setTheme(themeName) {
document.documentElement.setAttribute('data-theme', themeName);
localStorage.setItem('theme', themeName);
}
// Load saved theme on page load
function loadTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
}
}
// Initialize
loadTheme();
// Switch to ocean theme
setTheme('ocean');<select onchange="setTheme(this.value)">
<option value="">Default (Emerald)</option>
<option value="ocean">Ocean</option>
<option value="sunset">Sunset</option>
<option value="lavender">Lavender</option>
<option value="forest">Forest</option>
<option value="midnight">Midnight (Dark)</option>
<option value="rose">Rose</option>
<option value="slate">Slate</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>// Load modules conditionally
if (document.querySelector('.chart-container')) {
const charts = await loadModule('charts');
}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
- 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
- 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
- Tables - DataTables with sorting, filtering, pagination
- Typography - Comprehensive typography system
- Icons - Font Awesome 7 + Bootstrap Icons
- Media Gallery - Image gallery with lightbox
- Calendar - Full-featured calendar component
- E-commerce - Product listings, shopping cart
- User Management - Profiles, contacts, projects
- Authentication - Login, registration pages
- Error Pages - 403, 404, 500 error pages
- 🚀 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
- 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
- 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
- Day.js - Lightweight date library
- NProgress - Progress bars for page loading
- Autosize - Auto-resizing textareas
- Font Awesome 7 + Bootstrap Icons - Icon libraries
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
- Tree Shaking - Removes unused code
- Code Splitting - Loads only what's needed
- Caching Strategy - Optimized for browser caching
npm run build- Netlify: Drag and drop the
distfolder - Vercel: Connect your GitHub repository
- GitHub Pages: Use the built-in GitHub Actions
- Traditional Hosting: Upload
distfolder contents
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
git clone https://github.com/your-username/gentelella.git
cd gentelella
npm install
npm run dev- Live Demo - See the template in action
- Component Documentation - Detailed component guide
- Performance Guide - Optimization details
- Componentization Plan - Future modularization
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.
# npm
npm install gentelella --save
# yarn
yarn add gentelella
# bower (legacy)
bower install gentelella --saveGentelella 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.
- 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
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.
- Colorlib - Original design and development
- Aigars Silkalns - Lead developer and maintainer
- 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