KPICard
dataA card component for displaying key performance indicators with trend information.
Preview
Total Revenue
$45,231
+20.1% from last month
Active Users
2,350
-4.3% from last week
Installation
npm install @launchapp/design-systemImport
import { KPICard } from "@launchapp/design-system";Examples
KPI Card
<KPICard label="Total Revenue" value="$45,231" trend="up" trendLabel="+20.1% from last month"/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | The KPI title/label. |
value* | string | number | — | The main KPI value to display. |
trend | "up" | "down" | "neutral" | — | Trend direction for color coding. |
trendLabel | string | — | Label describing the trend (e.g. '+20% from last month'). |
sparklineData | number[] | — | Array of numbers to render a sparkline chart. |
sparklineColor | string | — | Color for the sparkline chart. |