puikinshGentelella Admin Template
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.
✨ 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
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 previewDevelopment 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.jsinput 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 buildDeploy to Various Platforms
- Netlify: Drag and drop the
distfolder - Vercel: Connect your GitHub repository
- GitHub Pages: Use the built-in GitHub Actions
- Traditional Hosting: Upload
distfolder 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