Component structure -- Example (KPI Card Component)

The KpiCard.tsx is a reusable widget used across dashboards like Ecommerce, CRM, and SaaS. It follows a consistent structure that most Glint dashboard widgets use: icon + title + animated value + progress visualization.

Component Structure

The card layout is divided into two main sections:

1. Header – contains the icon, title, and animated metric value.
2. Footer – displays the progress bar with dynamic label and variant.

  
    <div className="card card-hover">
      <!-- Header Section -->
      <div className="d-flex justify-content-between align-items-center">
        <!-- Icon + Title -->
        <div className="d-flex gap-15 align-items-center">
          <div className="icon-solid bg-dark sq-50px rounded">
            <i className="lni lni-dollar text-white fs-30"></i>
          </div>
          <p className="fs-24 mb-0">Revenue</p>
        </div>

        <!-- Animated Value -->
        <h2 className="mb-0">$<AnimatedNumber value={12000} /></h2>
      </div>

      <!-- Footer Section: Progress Bar -->
      <ProgressBar
        variant="success"
        now={70}
        label="70%"
      />
    </div>
  

Data-driven Approach

Each KpiCard takes a KpiCardData object from kpiCard.type.ts. Example:

    
    {
      "title": "Revenue",
      "icon": "lni lni-dollar",
      "value": 12000,
      "progress": 70,
      "progressLabel": "70%",
      "variant": "success"
    }
    
  

This approach means you can swap datasets or APIs without rewriting the component. Most widgets in Glint dashboards (charts, stat cards, activity feeds) follow this same data + reusable component pattern.