Bootstrap 5 Admin Template — jQuery-Free Vite Dashboard Starter Kit for Developers

🚀 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, 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.js input configuration
Reference appropriate modules for functionality needed

Custom Styling

// src/scss/custom.scss
.my-custom-component {
  // Your custom styles
}

Color Schemes (2026 Modern Collection)

Gentelella includes 10 professionally designed color schemes that users can switch between at runtime. Each theme is carefully crafted for accessibility and modern aesthetics.

Available Themes

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

Usage

HTML Attribute (Recommended)

<html data-theme="ocean">

CSS Class

<body class="theme-ocean">

JavaScript Theme Switcher

// 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');

Theme Selector Dropdown Example

<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>

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 (192×192, 512×512)
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 7 + Bootstrap Icons
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 7 + Bootstrap Icons – Icon libraries

🔧 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:

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

文章版权归作者所有，未经允许请勿转载。

THE END

WordPress/HTML templates