Components Guide

Complete reference for all components available in Gentelella Admin Template

Table of contents

1. Dashboard Components
   1. Dashboard Layouts
      1. Main Dashboard (index.html)
      2. Dashboard 2 (index2.html)
      3. Dashboard 3 (index3.html)
   2. Widget Cards
      1. Tile Widgets
      2. Info Box Widgets
2. Chart Components
   1. Chart.js Integration
      1. Line Charts
      2. Bar Charts
      3. Pie Charts
   2. Morris.js Charts
      1. Line Charts
      2. Area Charts
   3. Sparkline Charts
   4. Gauge Charts
3. Form Components
   1. Basic Form Elements
      1. Input Fields
      2. Select Dropdowns
   2. Advanced Form Components
      1. Select2 Enhanced Dropdowns
      2. Date/Time Pickers
      3. Range Sliders
      4. File Upload with Dropzone
      5. Rich Text Editor
   3. Form Validation
      1. Bootstrap Validation
      2. Parsley.js Validation
4. Table Components
   1. Basic Tables
      1. Responsive Table
   2. DataTables Integration
      1. Basic DataTable
      2. Advanced DataTable Features
5. UI Elements
   1. Navigation Components
      1. Sidebar Navigation
      2. Breadcrumbs
   2. Modal Components
      1. Basic Modal
      2. Large Modal with Form
   3. Alert Components
      1. Bootstrap Alerts
      2. PNotify Notifications
   4. Progress Components
      1. Progress Bars
      2. Animated Progress with JavaScript
6. Map Components
   1. jVectorMap Integration
      1. World Map
      2. Regional Map
7. Calendar Components
   1. FullCalendar Integration
8. Media Components
   1. Image Gallery
9. Next Steps

---

Dashboard Components

Dashboard Layouts

Gentelella includes three pre-designed dashboard layouts:

Main Dashboard (index.html)

• Revenue widgets with animated counters
• Real-time charts showing trends and analytics
• Activity timeline with user interactions
• Quick stats cards with icons
• To-do lists with progress tracking

<!-- Revenue Widget Example -->
<div class="col-md-3 col-sm-6">
  <div class="x_panel tile fixed_height_320">
    <div class="x_title">
      <h2>Total Revenue</h2>
    </div>
    <div class="x_content">
      <span class="chart" data-percent="73">
        <span class="percent">73</span>
      </span>
      <h3>$52,147</h3>
      <div class="sidebar-widget">
        <h4>Revenue breakdown</h4>
        <canvas id="revenue-chart"></canvas>
      </div>
    </div>
  </div>
</div>

Dashboard 2 (index2.html)

• Full-width charts for detailed analytics
• Map integration with geographical data
• Compact widgets for KPIs
• News feed with updates

Dashboard 3 (index3.html)

• Calendar integration with events
• Weather widget with forecasts
• Social media stats counters
• Project timeline view

Widget Cards

Tile Widgets

<div class="tile_count">
  <div class="col-md-2 col-sm-4 tile_stats_count">
    <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
    <div class="count">2500</div>
    <span class="count_bottom"><i class="green">4% </i> From last Week</span>
  </div>
</div>

Info Box Widgets

<div class="col-md-4 col-sm-4">
  <div class="x_panel tile fixed_height_320 overflow_hidden">
    <div class="x_title">
      <h2>Network Activities</h2>
    </div>
    <div class="x_content">
      <table class="countries_list">
        <tbody>
          <tr>
            <td>United States</td>
            <td class="fs-15 fw-700 text-right">2,371</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

---

Chart Components

Chart.js Integration

Line Charts

// Initialize line chart
import Chart from 'chart.js/auto';

const ctx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: '#73879C',
      backgroundColor: 'rgba(115, 135, 156, 0.1)',
      tension: 0.4
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  }
});

Bar Charts

<div class="x_panel">
  <div class="x_title">
    <h2>Monthly Sales</h2>
  </div>
  <div class="x_content">
    <canvas id="barChart" width="400" height="200"></canvas>
  </div>
</div>

Pie Charts

const pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['#73879C', '#26B99A', '#3498DB']
    }]
  }
});

Morris.js Charts

Line Charts

Morris.Line({
  element: 'line-chart',
  data: [
    { y: '2023-01', a: 100, b: 90 },
    { y: '2023-02', a: 75,  b: 65 },
    { y: '2023-03', a: 50,  b: 40 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

Area Charts

Morris.Area({
  element: 'area-chart',
  data: [
    { period: '2023-01', sales: 2666, downloads: 2647 },
    { period: '2023-02', sales: 2778, downloads: 2294 }
  ],
  xkey: 'period',
  ykeys: ['sales', 'downloads'],
  labels: ['Sales', 'Downloads']
});

Sparkline Charts

$('.sparkline').sparkline([5,6,7,2,0,-4,-2,4], {
  type: 'line',
  width: '100%',
  height: '30',
  lineColor: '#26B99A',
  fillColor: 'rgba(38, 185, 154, 0.3)'
});

Gauge Charts

import Gauge from 'gauge.js';

const gauge = new Gauge(document.getElementById('gauge')).setOptions({
  angle: 0.15,
  lineWidth: 0.2,
  radiusScale: 1,
  pointer: {
    length: 0.6,
    strokeWidth: 0.035,
    color: '#000000'
  },
  limitMax: false,
  limitMin: false,
  colorStart: '#6FADCF',
  colorStop: '#8FC0DA',
  strokeColor: '#E0E0E0',
  generateGradient: true,
  highDpiSupport: true
});

gauge.maxValue = 100;
gauge.setMinValue(0);
gauge.animationSpeed = 32;
gauge.set(67);

---

Form Components

Basic Form Elements

Input Fields

<div class="form-group row">
  <label class="col-form-label col-md-3 col-sm-3">Email</label>
  <div class="col-md-6 col-sm-6">
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
</div>

Select Dropdowns

<div class="form-group row">
  <label class="col-form-label col-md-3 col-sm-3">Country</label>
  <div class="col-md-6 col-sm-6">
    <select class="form-control">
      <option>Choose option</option>
      <option>United States</option>
      <option>United Kingdom</option>
    </select>
  </div>
</div>

Advanced Form Components

Select2 Enhanced Dropdowns

<select class="form-control select2" multiple="multiple">
  <option value="AK">Alaska</option>
  <option value="HI">Hawaii</option>
  <option value="CA">California</option>
</select>

// Initialize Select2
$('.select2').select2({
  theme: 'bootstrap-5',
  width: '100%',
  placeholder: 'Select options...'
});

Date/Time Pickers

<div class="form-group">
  <label>Date Range:</label>
  <div>
    <input type="text" class="form-control" id="reservation" 
           placeholder="Select date range">
  </div>
</div>

import { DateTime } from 'tempus-dominus';

new DateTime(document.getElementById('reservation'), {
  display: {
    components: {
      calendar: true,
      date: true,
      month: true,
      year: true,
      decades: true,
      clock: false
    }
  }
});

Range Sliders

<div class="form-group">
  <label>Price Range:</label>
  <input type="text" id="range-slider" value="" name="range">
</div>

$("#range-slider").ionRangeSlider({
  type: "double",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  prefix: "$"
});

File Upload with Dropzone

<div class="dropzone" id="file-dropzone">
  <div class="dz-message">
    <h3>Drop files here or click to upload</h3>
  </div>
</div>

import Dropzone from 'dropzone';

new Dropzone("#file-dropzone", {
  url: "/upload",
  maxFilesize: 10,
  acceptedFiles: ".jpeg,.jpg,.png,.gif"
});

Rich Text Editor

<div class="form-group">
  <label>Content:</label>
  <div id="editor" class="form-control" style="height: 300px;">
    <p>Initial content...</p>
  </div>
</div>

Form Validation

Bootstrap Validation

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="validationCustom01">First name</label>
    <input type="text" class="form-control" id="validationCustom01" 
           placeholder="First name" required>
    <div class="invalid-feedback">
      Please provide a valid first name.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Parsley.js Validation

<form data-parsley-validate>
  <div class="form-group">
    <label>Email *</label>
    <input type="email" class="form-control" 
           data-parsley-type="email" required>
  </div>
  <div class="form-group">
    <label>Password *</label>
    <input type="password" class="form-control" 
           data-parsley-minlength="6" required>
  </div>
</form>

---

Table Components

Basic Tables

Responsive Table

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>$320,800</td>
      </tr>
    </tbody>
  </table>
</div>

DataTables Integration

Basic DataTable

<table id="datatable" class="table table-striped table-bordered" 
       style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

$('#datatable').DataTable({
  ajax: '/api/employees',
  columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'age' },
    { data: 'start_date' },
    { data: 'salary' }
  ],
  responsive: true,
  pageLength: 25,
  dom: 'Bfrtip',
  buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
});

Advanced DataTable Features

$('#advanced-datatable').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: '/api/data',
    type: 'POST'
  },
  columns: [
    { data: 'id', searchable: false },
    { data: 'name' },
    { data: 'email' },
    { 
      data: 'actions',
      orderable: false,
      searchable: false,
      render: function(data, type, row) {
        return `
          <button class="btn btn-sm btn-primary edit-btn" data-id="${row.id}">Edit</button>
          <button class="btn btn-sm btn-danger delete-btn" data-id="${row.id}">Delete</button>
        `;
      }
    }
  ],
  order: [[0, 'desc']],
  pageLength: 50,
  lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});

---

UI Elements

Navigation Components

Sidebar Navigation

<div class="col-md-3 left_col">
  <div class="left_col scroll-view">
    <div class="navbar nav_title" style="border: 0;">
      <a href="index.html" class="site_title">
        <i class="fa fa-paw"></i> <span>Gentelella!</span>
      </a>
    </div>
    
    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
      <div class="menu_section">
        <h3>General</h3>
        <ul class="nav side-menu">
          <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
            <ul class="nav child_menu">
              <li><a href="index.html">Dashboard</a></li>
              <li><a href="index2.html">Dashboard2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Breadcrumbs

<div class="page-title">
  <div class="title_left">
    <h3>Form Elements</h3>
  </div>
  <div class="title_right">
    <div class="col-md-5 col-sm-5 form-group pull-right top_search">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
      </div>
    </div>
  </div>
</div>

Modal Components

Basic Modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal body content...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Large Modal with Form

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Large Modal</h4>
      </div>
      <div class="modal-body">
        <form>
          <!-- Form content -->
        </form>
      </div>
    </div>
  </div>
</div>

Alert Components

Bootstrap Alerts

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Success!</strong> This is a success alert.
</div>

<div class="alert alert-danger alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Error!</strong> Something went wrong.
</div>

PNotify Notifications

import PNotify from 'pnotify';

// Success notification
new PNotify({
  title: 'Success!',
  text: 'Your changes have been saved.',
  type: 'success',
  styling: 'bootstrap4'
});

// Error notification
new PNotify({
  title: 'Error!',
  text: 'An error occurred while processing your request.',
  type: 'error',
  styling: 'bootstrap4'
});

Progress Components

Progress Bars

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" 
       aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" 
       role="progressbar" aria-valuenow="75" aria-valuemin="0" 
       aria-valuemax="100" style="width:75%">
    75%
  </div>
</div>

Animated Progress with JavaScript

function animateProgress(selector, targetPercentage) {
  const progressBar = document.querySelector(selector);
  let currentPercentage = 0;
  
  const interval = setInterval(() => {
    if (currentPercentage >= targetPercentage) {
      clearInterval(interval);
      return;
    }
    
    currentPercentage++;
    progressBar.style.width = currentPercentage + '%';
    progressBar.textContent = currentPercentage + '%';
  }, 20);
}

// Usage
animateProgress('.progress-bar', 85);

---

Map Components

jVectorMap Integration

World Map

<div id="world-map" style="height: 400px;"></div>

$('#world-map').vectorMap({
  map: 'world_mill',
  backgroundColor: 'transparent',
  regionStyle: {
    initial: {
      fill: '#73879C',
      "fill-opacity": 1,
      stroke: '#fff',
      "stroke-width": 1,
      "stroke-opacity": 1
    }
  },
  series: {
    regions: [{
      values: {
        "US": 298,
        "SA": 200,
        "AU": 760,
        "IN": 2000000,
        "GB": 120
      },
      scale: ['#26B99A', '#E74C3C'],
      normalizeFunction: 'polynomial'
    }]
  }
});

Regional Map

$('#usa-map').vectorMap({
  map: 'us_aea',
  backgroundColor: 'transparent',
  regionsSelectable: true,
  series: {
    regions: [{
      values: {
        "US-CA": 200,
        "US-TX": 300,
        "US-NY": 250
      },
      scale: ['#3498DB', '#E74C3C']
    }]
  }
});

---

Calendar Components

FullCalendar Integration

<div id="calendar"></div>

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialDate: new Date(),
  navLinks: true,
  selectable: true,
  selectMirror: true,
  select: function(arg) {
    const title = prompt('Event Title:');
    if (title) {
      calendar.addEvent({
        title: title,
        start: arg.start,
        end: arg.end,
        allDay: arg.allDay
      });
    }
    calendar.unselect();
  },
  eventClick: function(arg) {
    if (confirm('Are you sure you want to delete this event?')) {
      arg.event.remove();
    }
  },
  editable: true,
  dayMaxEvents: true,
  events: [
    {
      title: 'All Day Event',
      start: '2023-01-01'
    },
    {
      title: 'Long Event',
      start: '2023-01-07',
      end: '2023-01-10'
    }
  ]
});

calendar.render();

---

Media Components

Image Gallery

<div class="row">
  <div class="col-md-4">
    <a href="images/large1.jpg" class="fancybox" rel="gallery1" 
       title="Image 1">
      <img src="images/thumb1.jpg" class="img-responsive" alt="">
    </a>
  </div>
  <div class="col-md-4">
    <a href="images/large2.jpg" class="fancybox" rel="gallery1" 
       title="Image 2">
      <img src="images/thumb2.jpg" class="img-responsive" alt="">
    </a>
  </div>
</div>

$('.fancybox').fancybox({
  openEffect: 'elastic',
  closeEffect: 'elastic',
  helpers: {
    title: {
      type: 'inside'
    }
  }
});

---

Next Steps

• Customization Guide - Learn how to customize these components
• Performance Guide - Optimize component loading
• API Reference - Detailed API documentation
• Examples - See components in action

---

💡 Pro Tip: Use the smart loading system to load only the components you need on each page. This significantly improves performance while maintaining functionality.