Stat Tile

Admin dashboard metric: value, a delta Badge that is green when the change is good news (invert for errors and latency), and an area Chart of the trend. Server-safe.

npx @kznlabs/labsui add stat-tile

Revenue

$48,290

+12.5%

Revenue trend
month	Revenue
May	$31,200
Jun	$33,800
Jul	$36,100
Aug	$39,400
Sep	$42,900
Oct	$48,290

Failed commands

0.42%

−18%

Failed commands trend
month	Failed commands
May	0.9%
Jun	0.81%
Jul	0.66%
Aug	0.61%
Sep	0.51%
Oct	0.42%

import { StatTile } from "@/components/blocks/stat-tile";export function RevenueTile({  months,}: {  months: { month: string; value: number }[];}) {  return (    <StatTile      label="Revenue"      value="$48,290"      delta={12.5}      period="vs last month"      data={months}      index="month"      dataKey="value"      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}    />  );}

import { StatTile } from "@/components/blocks/stat-tile";// invert: going down is the good news here, so a negative delta is green.export function ErrorRateTile({  weeks,}: {  weeks: { week: string; value: number }[];}) {  return (    <StatTile      label="Error rate"      value="0.42%"      delta={-18}      invert      period="vs last week"      data={weeks}      index="week"      format={{ style: "percent", maximumFractionDigits: 2 }}    />  );}

<StatTile>

Admin dashboard tile: metric, delta Badge (green when it is good news) and an area Chart of the trend.

label*
string
Metric name, e.g. "Revenue".
value*
ReactNode
Formatted headline, e.g. "$48,290".
data
Record<string, string | number>[]
Trend rows for the chart below.
dataKeydefault "value"
string
Key of the value in each row.
delta
number
Change in %, e.g. 12.5 or -3. Positive is good unless invert.
format
NumberFormatOptions
Intl number format for the chart axis and tooltip.
indexdefault "x"
string
Key of the x label in each row.
invert
boolean
For metrics where down is good (errors, latency).
period
string
"vs last month".

Prop	Type	Default
`label*` Metric name, e.g. "Revenue".	`string`	—
`value*` Formatted headline, e.g. "$48,290".	`ReactNode`	—
`data` Trend rows for the chart below.	`Record<string, string \| number>[]`	—
`dataKey` Key of the value in each row.	`string`	`"value"`
`delta` Change in %, e.g. 12.5 or -3. Positive is good unless `invert`.	`number`	—
`format` Intl number format for the chart axis and tooltip.	`NumberFormatOptions`	—
`index` Key of the x label in each row.	`string`	`"x"`
`invert` For metrics where down is good (errors, latency).	`boolean`	—
`period` "vs last month".	`string`	—

* required. Every component also takes className.