@litforge/kpi-card

A Lit web component for displaying Key Performance Indicator (KPI) cards with values, labels, deltas, and status indicators.

Overview

The KpiCard component displays metrics in a card format with support for:

• Main value display with optional unit
• Delta indicators (up/down/neutral)
• Loading states
• Customizable styling via CSS variables

Installation

npm install @litforge/kpi-card
# or
pnpm add @litforge/kpi-card
# or
yarn add @litforge/kpi-card

Basic Usage

<script type="module">
  import '@litforge/kpi-card';
</script>

<kpi-card
  label="Total Revenue"
  value="125000"
  unit="$"
  delta="12.5"
  status="up"
></kpi-card>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | '' | Label text displayed above the value | | value | number \| null | null | The main KPI value to display | | unit | string | undefined | Unit to display after the value (e.g., "$", "%", "k") | | delta | number \| null | null | Percentage change to display | | loading | boolean | false | Shows loading state | | status | 'neutral' \| 'up' \| 'down' | 'neutral' | Visual status indicator |

Examples

Basic KPI Card

<kpi-card
  label="Active Users"
  value="1234"
></kpi-card>

With Delta and Status

<kpi-card
  label="Revenue"
  value="125000"
  unit="$"
  delta="12.5"
  status="up"
></kpi-card>

Loading State

<kpi-card
  label="Processing"
  loading
></kpi-card>

Styling

The component uses CSS variables for theming:

kpi-card {
  --lf-kpi-card-font-family: 'Inter', sans-serif;
  --lf-kpi-card-font-size-base: 16px;
  --lf-kpi-card-bg: #ffffff;
  --lf-kpi-card-text: #111827;
  --lf-kpi-card-color-muted: #666666;
  --lf-kpi-card-accent: #0b6efd;
  --lf-kpi-card-space-md: 12px;
  --lf-kpi-card-radius-sm: 8px;
  --lf-kpi-card-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
}

TypeScript

import { KpiCard } from '@litforge/kpi-card';
import type { KpiCardProps, KpiStatus } from '@litforge/kpi-card';

const props: KpiCardProps = {
  label: 'Revenue',
  value: 125000,
  unit: '$',
  delta: 12.5,
  status: 'up'
};

License

Part of the LitForge component library.