Data display

StatCard

A KPI tile that links to the list behind the number.

@codeways/ui/stat-card

KPI tiles

One number, its label, and what changed. The whole tile is a link to the list that explains the number.

OutstandingAUD12,480.00−8.2%vs last month OverdueLKR1,284,500.00+12.4%vs last month Active employees584 on leave today

Without a delta

Omit `delta` to render `context` alone, with no arrow.

This month's payrollUSD94,200.00Runs on 28 Sep

Loading

Shape-matched skeletons in place of label, value and delta.

Usage

import { StatCard } from "@codeways/ui/stat-card";
import { AlertCircle } from "lucide-react";

<StatCard
  icon={AlertCircle}
  label="Overdue"
  currency="LKR"
  value="1,284,500.00"
  delta={12.4}
  deltaGood={false}
  context="vs last month"
  href="/billing/invoices?view=overdue"
/>