Gentelella 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.0

• 🚀 Vite Build System - Lightning-fast development and optimized production builds
• 📦 Bootstrap 5 - 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

📊 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)
│   ├── 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

🎯 Smart Loading System

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

📱 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

1. Create HTML file in production/ directory
2. Add entry to vite.config.js input configuration
3. 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');
}

📦 Available Components

Dashboard Features

• Multiple Dashboard Layouts - 3 different dashboard designs
• Widgets - Various dashboard widgets and cards
• Charts - Chart.js, Morris.js, 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 + Glyphicons
• 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

• Bootstrap 5.3.6 - Modern CSS framework
• Vite 6.3.5 - Next generation build tool
• SASS - CSS preprocessor
• jQuery 3.6.1 - DOM manipulation (being phased out)

Charts & Visualization

• Chart.js 4.4.2 - Modern charting library
• Sparklines - Mini charts and graphs
• jVectorMap - Interactive world maps
• Gauge.js - Beautiful gauge charts

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:

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

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