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.
- 🚀 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
- 🔧 jQuery Easing Fixed - All animation errors resolved
- 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)
│ ├── main.scss # Styles entry point
│ ├── js/ # Custom JavaScript
│ ├── scss/ # Custom SASS files
│ └── 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 now uses intelligent code splitting:
- Core Bundle (79 KB): Essential libraries loaded on every page
- 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
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
}// Load modules conditionally
if (document.querySelector('.chart-container')) {
const charts = await loadModule('charts');
}- 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 6
- 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 6.3.5 - Ultra-fast ES module build system with 90% smaller bundle size
- 📦 Bootstrap 5.3.7 - Latest Bootstrap with modern design system
- 🎨 SASS Modules - Modern CSS architecture with custom theme variables
- jQuery 3.6.1 - DOM manipulation (being phased out)
- Chart.js 4.5.0 - 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 6 - Icon library
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
