PVR Tech Studio

Taxi CRM 2026

Components

Reusable Bootstrap 5 UI blocks bundled with the template, the PUG mixins that emit them, and where to find live examples.

3 min read

Updated June 21, 2026

Reusable UI blocks. Each is standard Bootstrap 5 plus the kit's own classes, already styled by assets/css/style.css (compiled from LESS — see CSS System). A live example of every component lives on the page named in each heading — open it to see more variants.

In the HTML edition many of these blocks have a PUG mixin in apps/html/pug/common_pages/mixins/ so you don't hand-write the markup — notably panelCard, the colLayout grid helpers (colFull, colHalf, colMain, colSidebar…) and the widgetStatsCard1–widgetStatsCard22 dashboard cards (see Widgets).

Cards / panels (used everywhere)

The card/panel pattern wraps nearly every screen — see it live on any page, e.g. the Widgets gallery. The panelCard mixin emits it:

+panelCard({ title: 'Role Master', subtitle: 'Manage user roles and permissions' })
    // body content

Each panel has a title and subtitle in its header, plus refresh/expand actions, and compiles to:

<div class="card panel-card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <p class="card-title">Role Master</p>
      <p class="card-subtitle text-muted mb-0">Manage user roles and permissions</p>
    </div>
    <div class="panel-actions">
      <button class="btn btn-sm btn-icon panel-refresh" type="button" title="Refresh">
        <span class="material-symbols-sharp">refresh</span>
      </button>
      <button class="btn btn-sm btn-icon panel-expand" type="button" title="Expand">
        <span class="material-symbols-sharp">fullscreen</span>
      </button>
    </div>
  </div>
  <div class="card-body">
    <!-- content -->
  </div>
</div>

showRefresh / showExpand (both default true) toggle the two action buttons; class and bodyClass add classes to the card and its body.

Buttons — `buttons.html`

↗ View live demo

<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-outline-primary" type="button">Outline</button>
<button class="btn btn-lg" type="button">Large</button>
<button class="btn btn-sm" type="button">Small</button>
<button class="btn btn-primary" type="button" disabled>Disabled</button>
 
<div class="btn-group" role="group" aria-label="Basic button group">
  <button class="btn btn-primary" type="button">Left</button>
  <button class="btn btn-primary" type="button">Middle</button>
  <button class="btn btn-primary" type="button">Right</button>
</div>

Colors: btn-primary / secondary / success / danger / warning / info / light / dark / link
Outline: btn-outline-* · Sizes: btn-lg, btn-sm · Icon-only: btn-icon
Groups: .btn-group, .btn-group-vertical

Spinner / loading buttons — `spinnerButtons.html`

↗ View live demo

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

Badges — `badges.html`

↗ View live demo

Use the kit's named colors (not Bootstrap's bg-*):

<span class="badge badge-green">Green</span>
<span class="badge badge-blue">Blue</span>
<span class="badge badge-yellow">Yellow</span>
<span class="badge badge-red">Red</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-teal">Teal</span>
<span class="badge badge-orange">Orange</span>
 
<span class="badge badge-pill badge-blue">Pill</span>
<span class="badge badge-blue-light">Light</span>
<span class="badge badge-outline-blue">Outline</span>
<span class="badge badge-sm badge-blue">Small</span>
<span class="badge badge-lg badge-blue">Large</span>

Variants: badge-{color}, badge-{color}-light, badge-outline-{color}, badge-pill, badge-sm, badge-lg. Full palette and hex values in 07 — CSS system.

Alerts — `alerts.html`

↗ View live demo

<div class="alert alert-primary mb-0" role="alert">A simple primary alert—check it out!</div>
 
<div class="alert alert-success alert-icon mb-0" role="alert">
  <i class="fa-solid fa-circle-check"></i><span>Your changes have been saved!</span>
</div>
 
<div class="alert alert-success alert-dismissible fade show mb-0" role="alert">
  <i class="fa-solid fa-circle-check me-2"></i>Successfully submitted your form!
  <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Variants: Bootstrap alert-{primary…dark}, the kit's alert-{blue/purple/teal/orange/green/red}, alert-outline-*, alert-icon, and alert-dismissible (with a .btn-close).

Modals — `modals.html`

↗ View live demo

Trigger with data-bs-toggle="modal" + data-bs-target:

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalDefault">Open</button>
 
<div class="modal fade" id="modalDefault" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">Body content…</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary" type="button">Save</button>
      </div>
    </div>
  </div>
</div>

Size/behavior modifiers on .modal-dialog: modal-sm, modal-lg, modal-xl, modal-fullscreen, modal-dialog-centered, modal-dialog-scrollable.

Dropdowns — `dropdowns.html`

↗ View live demo

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Directions: wrap in .dropup, .dropend, .dropstart. Split button: add a second toggle with .dropdown-toggle-split. Align the menu with .dropdown-menu-end.

Tabs & pills — `tabs.html`

↗ View live demo

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabHome" type="button" role="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabProfile" type="button" role="tab">Profile</button>
  </li>
</ul>
<div class="tab-content pt-3">
  <div class="tab-pane fade show active" id="tabHome" role="tabpanel">Home content</div>
  <div class="tab-pane fade" id="tabProfile" role="tabpanel">Profile content</div>
</div>

Use .nav-pills + data-bs-toggle="pill" for pill-style tabs; add .flex-column for a vertical set.

Accordion — `accordion.html`

↗ View live demo

<div class="accordion" id="accordionBasic">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="material-symbols-sharp">folder</span>
        <div class="accordion-title-wrap">
          <span class="accordion-title">Accordion Item #1</span>
          <span class="accordion-subtitle">Click to expand</span>
        </div>
        <span class="accordion-arrow"><span class="material-symbols-sharp">keyboard_arrow_down</span></span>
      </button>
    </h2>
    <div class="accordion-collapse collapse show" id="collapseOne" data-bs-parent="#accordionBasic">
      <div class="accordion-body"><p class="mb-0">Content…</p></div>
    </div>
  </div>
</div>

Add .accordion-flush to the wrapper for an edge-to-edge (borderless) accordion.

Carousel — `carousel.html`

↗ View live demo

<div class="carousel slide carousel-basic" id="carouselWithControls" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button class="active" type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="0"></button>
    <button type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"> … </div>
    <div class="carousel-item"> … </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithControls" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Pagination — `pagination.html`

↗ View live demo

<nav aria-label="Pagination">
  <ul class="pagination mb-0">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true">Next</a></li>
  </ul>
</nav>

Sizes: .pagination-sm, .pagination-lg. States: .active, .disabled.

Progress bars — `progressBar.html`

↗ View live demo

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 100%">Success</div>
</div>

Color the bar with bg-{primary/success/info/warning/danger}; add progress-bar-striped progress-bar-animated for the animated stripe.

Tree view — `treeView.html`

↗ View live demo

Uses the same accordion-style nav primitives as the sidebar:

<li class="nav-item nav-accordion">
  <span class="nav-link">
    <span class="make_icon material-symbols-sharp">database</span>
    <span class="nav-title">Masters</span>
    <span class="nav-arrow"></span>
  </span>
  <div class="nav-sub nav-sub-accordion">
    <a class="nav-link" href="#">Item 1</a>
    <a class="nav-link" href="#">Item 2</a>
  </div>
</li>

Typography — `typography.html`

↗ View live demo

<h1 class="display-1">Display 1</h1>
<p class="lead">Lead paragraph for emphasis.</p>
<small class="text-muted">Small muted text</small>

Headings h1–h6, display sizes display-1…display-6, helpers .lead, .text-{muted/primary/success/danger/warning/info}.

Icons

The kit uses two main icon sets (plus Simple Line Icons):

<!-- Google Material Symbols (preferred in this kit) -->
<span class="material-symbols-sharp">refresh</span>
<span class="material-symbols-sharp">home</span>
 
<!-- Font Awesome (loaded via the FA kit) -->
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-gear"></i>
 
<!-- Simple Line Icons -->
<i class="icon-settings"></i>

Material Symbols Sharp is the preferred set and is used throughout the shell (header, sidebar, panel actions). See materialIcons.html, fontAwesome.html, and simpleLineIcons.html for the full sets.

Material Symbols icon gallery

Toasts & SweetAlert (JavaScript-driven)

Toasts and confirmation dialogs are triggered from JavaScript, not static markup:

app.toast.success('Saved successfully');     // see toastNotifications.html
Swal.fire({ title: 'Delete?', icon: 'warning', showCancelButton: true });  // sweetAlerts.html

Toast helpers are documented in 08 — JavaScript; SweetAlert2 is bundled under assets/plugins/sweetalert2/.

Was this page helpful?

PreviousLayout NextForms

Components

Cards / panels (used everywhere)

Buttons — buttons.html

Spinner / loading buttons — spinnerButtons.html

Badges — badges.html

Alerts — alerts.html

Modals — modals.html

Dropdowns — dropdowns.html

Tabs & pills — tabs.html

Accordion — accordion.html

Carousel — carousel.html

Pagination — pagination.html

Progress bars — progressBar.html

Tree view — treeView.html

Typography — typography.html

Icons

Toasts & SweetAlert (JavaScript-driven)

Buttons — `buttons.html`

Spinner / loading buttons — `spinnerButtons.html`

Badges — `badges.html`

Alerts — `alerts.html`

Modals — `modals.html`

Dropdowns — `dropdowns.html`

Tabs & pills — `tabs.html`

Accordion — `accordion.html`

Carousel — `carousel.html`

Pagination — `pagination.html`

Progress bars — `progressBar.html`

Tree view — `treeView.html`

Typography — `typography.html`