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

# 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](#quick-start){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
[View on GitHub](https://github.com/puikinsh/gentelella){: .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](https://nodejs.org/) (v16 or higher)
- npm, yarn, or pnpm package manager

### Installation

```bash
# 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

```bash
# 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](https://colorlib.com/).

---

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

---

<div class="text-center">
  <p><strong>Made with ❤️ by <a href="https://colorlib.com/">Colorlib</a></strong></p>
</div>