4.4 KiB

Raw Blame History

layout	title	nav_order	description	permalink
default	Gentelella Admin Template Documentation	1	Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations	/

Gentelella Admin Template Documentation

{: .fs-9 }

Modern Bootstrap 5 Admin Dashboard Template with Vite Build System & Performance Optimizations {: .fs-6 .fw-300 }

Get Started Now{: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } View on GitHub{: .btn .fs-5 .mb-4 .mb-md-0 }

Welcome to Gentelella v2.0

Gentelella is a modern, powerful, and completely free Bootstrap 5 admin template that has been completely rebuilt with Vite, performance optimizations, and the latest web technologies.

✨ What's New in Version 2.0

🚀 90% smaller initial bundle (779KB → 79KB)
⚡ 40-70% faster page loads with intelligent code splitting
📦 Modern Build System with Vite 6.3.5
🎨 Bootstrap 5.3.6 with updated design system
🧩 Smart Module Loading - Load only what you need
📱 Mobile-First responsive design

📊 Performance Metrics

Metric	Before	After	Improvement
Initial Bundle Size	779 KB	79 KB	90% smaller
Total Page Load	1.3 MB	770 KB	40% reduction
First Contentful Paint	2.1s	0.8s	62% faster
Time to Interactive	3.5s	1.2s	66% faster

Quick Start

Prerequisites

Node.js (v16 or higher)
npm, yarn, or pnpm package manager

Installation

# Clone the repository
git clone https://github.com/puikinsh/gentelella.git
cd gentelella

# Install dependencies
npm install

# Start development server
npm run dev
# Your server will be running at http://localhost:3000

Alternative Installation

# npm package
npm install gentelella --save

# yarn package  
yarn add gentelella

Features Overview

🏠 Dashboard Components

3 Dashboard Layouts - Different styles for various use cases
Widget Cards - Revenue, stats, progress indicators
Real-time Charts - Live data visualization
Activity Feeds - User activity and notifications

📊 Data Visualization

Chart.js Integration - Modern, responsive charts
Morris.js Charts - Beautiful time-series graphs
Interactive Maps - World maps with jVectorMap
Gauge Charts - Animated gauge displays

📝 Form Components

Multi-step Wizards - Complex form workflows
Rich Text Editors - WYSIWYG content editing
File Upload - Drag & drop with progress tracking
Advanced Selects - Searchable, multi-select dropdowns

📋 Table Components

DataTables - Advanced sorting, filtering, pagination
Responsive Tables - Mobile-optimized displays
Export Functions - PDF, Excel, CSV export options

Technology Stack

Core Technologies

Bootstrap 5.3.6 - CSS Framework
Vite 6.3.5 - Build Tool
SASS - CSS Preprocessor
jQuery 3.6.1 - DOM Manipulation*

*jQuery is being phased out in favor of vanilla JavaScript

Chart Libraries

Chart.js 4.4.2 - Modern responsive charts
Morris.js - Time-series line graphs
jVectorMap - Interactive world maps
Gauge.js - Beautiful animated gauges

Form Libraries

Select2 - Enhanced dropdown selections
Tempus Dominus - Bootstrap 5 date/time picker
Ion.RangeSlider - Advanced range controls
DataTables - Advanced table functionality

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
Opera	74+

Internet Explorer is not supported - We focus on modern browsers for the best performance and features.

License

MIT License - Free for personal and commercial use with attribution to Colorlib.

Next Steps

[Installation Guide]({{ site.baseurl }}/installation/) - Detailed setup instructions
[Configuration]({{ site.baseurl }}/configuration/) - Customize the template
[Components]({{ site.baseurl }}/components/) - Explore all available components
[Performance]({{ site.baseurl }}/performance/) - Optimization strategies
[Deployment]({{ site.baseurl }}/deployment/) - Deploy to production

Made with ❤️ by Colorlib

4.4 KiB Raw Blame History