Gentelella Admin is a free to use Bootstrap admin template
npm install gentelellaModern 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.
!Gentelella Bootstrap Admin Template
- โก 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
- Node.js (v16 or higher)
- npm or yarn
``bashClone the repository
git clone https://github.com/puikinsh/gentelella.git
cd gentelella
$3
`bash
Development with hot reload
npm run devProduction build with optimizations
npm run buildPreview 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
$3
- 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$3
- 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
$3
1. Create HTML file in
production/ directory
2. Add entry to vite.config.js input configuration
3. Reference appropriate modules for functionality needed$3
`scss
// src/scss/custom.scss
.my-custom-component {
// Your custom styles
}
`$3
`javascript
// Load modules conditionally
if (document.querySelector('.chart-container')) {
const charts = await loadModule('charts');
}
`$3
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
$3
- 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$3
- 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$3
- 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$3
- E-commerce - Product listings, shopping cart
- User Management - Profiles, contacts, projects
- Authentication - Login, registration pages
- Error Pages - 403, 404, 500 error pages๐จ Built With
$3
- ๐ 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$3
- 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$3
- 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$3
- Day.js - Lightweight date library
- NProgress - Progress bars for page loading
- Autosize - Auto-resizing textareas
- Font Awesome 6 - Icon library๐ง Configuration
$3
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
$3
- Tree Shaking - Removes unused code
- Code Splitting - Loads only what's needed
- Caching Strategy - Optimized for browser caching
๐ Deployment
$3
`bash
npm run build
`$3
- 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:
1. Fork the repository
2. Create a feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request$3
`bash
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
`bash
npm
npm install gentelella --saveyarn
yarn add gentelellabower (legacy)
bower install gentelella --save
``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.
- 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