Components Guide

Complete reference for all components available in Gentelella Admin Template

Dashboard Components
1. Dashboard Layouts
2. Widget Cards
  1. Tile Widgets
  2. Info Box Widgets
Chart Components
1. Chart.js Integration
2. ECharts
  1. Gauge Charts
Form Components
Table Components
1. Basic Tables
  1. Responsive Table
2. DataTables Integration
  1. Basic DataTable
  2. Advanced DataTable Features
UI Elements
Map Components
1. Leaflet Maps
  1. Basic Map
  2. Map with Multiple Markers
Calendar Components
1. FullCalendar Integration
Media Components
1. Image Gallery
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

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']
    }]
  }
});

ECharts

import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('echart-line'));
chart.setOption({
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
  yAxis: { type: 'value' },
  series: [{
    data: [820, 932, 901, 934, 1290],
    type: 'line',
    smooth: true
  }]
});

Gauge Charts

const gauge = echarts.init(document.getElementById('echart-gauge'));
gauge.setOption({
  series: [{
    type: 'gauge',
    detail: { formatter: '{value}%' },
    data: [{ value: 67, name: 'Progress' }]
  }]
});

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

Choices.js Enhanced Dropdowns

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

import Choices from 'choices.js';

new Choices('.choices-select', {
  removeItemButton: true,
  searchEnabled: true,
  placeholder: true,
  placeholderValue: '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

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

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

<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

Leaflet Maps

Basic Map

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

import L from 'leaflet';

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('Hello from Leaflet!')
  .openPopup();

Map with Multiple Markers

const locations = [
  { lat: 40.7128, lng: -74.006, label: 'New York' },
  { lat: 34.0522, lng: -118.2437, label: 'Los Angeles' },
  { lat: 41.8781, lng: -87.6298, label: 'Chicago' }
];

locations.forEach(loc => {
  L.marker([loc.lat, loc.lng]).addTo(map)
    .bindPopup(loc.label);
});

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 Integration - Connect components with backend APIs
Configuration - Configure component defaults

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