React Stat Card Component

Monthly revenue

$48,210

12.5%vs last month

Active users

12.9K

3.2%vs last month

Churn rate

2.4%

0.3%vs last month

Installation

pnpm add krz-ui

import { StatCard } from "krz-ui";

<StatCard
  label="Monthly revenue"
  value="$48,210"
  delta={{ value: 12.5, label: "vs last month" }}
  trend={[31, 34, 33, 38, 41, 44, 48]}
/>

Prop	Type	Description
`label`	`ReactNode`	What the number is, in sentence case.
`value`	`ReactNode`	The headline figure, already formatted.
`delta`	`{ value, label?, format?, upIsGood? }`	Change vs a named period. Set upIsGood: false for costs, churn or latency.
`trend`	`number[]`	Recent values for a sparkline.
`icon`	`ReactNode`	Optional icon in the top-right corner.
`className / style / ref`	`—`	All go to the outer element. See Customization.
`classNames`	`{ label?, icon?, value?, delta?, period?, trend? }`	Extra classes for inner parts.