FREE SALESFORCE LWC COMPONENT

KPI Card

Keep the primary number visually dominant and include a useful label and optional trend context.

Component structure

COMPONENTwcsKpiCard

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <article class="kpi-card">
    <span class="label">Open Cases</span>
    <strong>{value}</strong>
    <span class="trend">+12% this month</span>
  </article>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class WcsKpiCard extends LightningElement {
  @api value = 128;
}

CSS

.kpi-card{padding:1rem;border:1px solid var(--lwc-colorBorder,#d8dde6);border-radius:.25rem;background:#fff}.label{display:block;color:#5f6b7a;font-size:.75rem}.kpi-card strong{display:block;font-size:2rem;line-height:1.2;margin:.35rem 0}.trend{font-size:.75rem;color:#2e844a}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>