PVR Tech Studio
Docs
Taxi CRM 2026
Widgets

Widgets

The widget gallery — every dashboard card, KPI tile, chart widget, list and tracker that ships with Taxi CRM 2026, and how to reuse them.

3 min read
Updated June 21, 2026

Taxi CRM 2026 ships a large gallery of ready-made widgets — self-contained cards you can drop into any page. Every widget on this page lives in widgets.html, built from the kit's widgetStatsCard1–widgetStatsCard22 PUG mixins (pug/common_pages/mixins/); copy the compiled card markup of the one you want and paste it into your own page. All widgets are Bootstrap 5 plus the kit's classes, already styled by the compiled design-system CSS, so they work anywhere with no extra setup.

The Taxi CRM 2026 widget gallery

↗ View live demo

Widget categories

The gallery is grouped so you can find what you need quickly:

CategoryExamplesTypical use
Welcome / profile cardsDriver profile, Fleet Manager greetingTop-of-dashboard hero with a call to action
Performance cardsDriver Performance, Fleet Utilization, Customer SatisfactionA single headline % with a circular gauge and sub-metrics
KPI stat tilesRevenue, Active Drivers, Bookings, Avg WaitCompact metric + a trend indicator and a mini chart
Breakdown cardsFare Collection, Fare Breakdown, Trip Analytics, Fleet StatusA total with a stacked progress bar split by category
Tracker cardsIncome Tracker, Trip TrackerA sparkline chart with a week-over-week delta
Report cardsTrip Report, StatisticsRich financial/operational tables with a date selector
Live trip cardDriver on trip, route stops, fare summaryReal-time pickup → drop tracking with fare math
List widgetsRecent Activity, Notifications, Driver Applications, Active Drivers, Recent CustomersAvatar + text + status rows with a View All link
TimelineToday's TimelineChronological event feed
CalendarsSchedule, BookingsMonth grid with event dots
Icon stat tilesActive Vehicles, GPS Tracking, Airport TripsImage-icon metric tiles in several visual styles

Anatomy of a widget

Each widget is a self-contained card with BEM-style classes named after its mixin (widget-stats-card-N__*). The KPI stat tile (widgetStatsCard13), for example, has a labelled header, a value with a trend indicator, and a <canvas> mini chart:

<div class="widget-stats-card-13">
  <div class="widget-stats-card-13__header">
    <span class="widget-stats-card-13__dot widget-stats-card-13__dot--green"></span>
    <span class="widget-stats-card-13__label">Revenue</span>
  </div>
  <div class="widget-stats-card-13__body">
    <div class="widget-stats-card-13__value">₹45,280</div>
    <div class="widget-stats-card-13__meta">
      <span class="widget-stats-card-13__change widget-stats-card-13__change--up">+12.5%</span>
      <span>from last week</span>
    </div>
  </div>
  <div class="widget-stats-card-13__chart"><canvas id="statsCard13Chart1"></canvas></div>
</div>

Swap the label, value, dot variant (--green / --purple / …) and change direction (--up / --down) to repurpose it. Icons throughout the kit use Material Symbols Sharp (material-symbols-sharp).

Colors

Widget accent colors come only from the kit's pale palette (defined in 01-variable.less) — pale red, orange, soft green, teal, purple, blue and yellow. Stick to these so widgets stay visually consistent across pages. See CSS System for the variable list.

Charts inside widgets

The tracker, KPI and statistics widgets render real charts with Chart.js — each has a <canvas> keyed by a chartId and is initialised from assets/js/pages/ui/widgets.js (widgets.html also loads FullCalendar for its calendar widgets). See Charts for how chart widgets are wired and how to swap in your own data.

Reusing a widget

  1. Open widgets.html in the browser and find the card you want.
  2. Copy that card's compiled markup from the source.
  3. Paste it into your page inside a row/column (see Layout).
  4. Replace the demo values, icon and labels with your own — or wire it to live data.

Widgets that show charts or live data also need their page script included. Copy the matching <script> include from the bottom of widgets.html (Chart.js, FullCalendar and assets/js/pages/ui/widgets.js) along with the markup.

Was this page helpful?