Data

Metric

One number and what it means: the label, the value, how it moved and against what. A description list, so a screen reader pairs the label with the value. It has no surface of its own: put it in a Card, or several in a BentoGrid. The value never truncates, since an ellipsis would hide digits: the large size steps down when its container is narrow, and in a very narrow tile pass a compact Amount. With loading it draws its pieces in their final shape.

view .md

Preview

spent this month

$2,184.50

Up +11.3%vs August

2 accounts not synced

saved

$9,589.90

Up +18.1%since January

Installation

terminal

bash

npx @entrepta/cli@latest add metric

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

metric.tsx

tsx

import { Metric } from "@/components/entrepta/metric"
import { Amount } from "@/components/entrepta/amount"
import { Delta } from "@/components/entrepta/delta"

<Card>
  <Metric
    label="spent this month"
    value={<Amount value={spent} />}
    delta={<Delta current={spent} previous={lastMonth} intent="increase-is-bad" />}
    comparison="vs August"
    hint="2 accounts not synced"
    size="lg"
  />
</Card>

Props

Prop	Type	Default	Description
label	ReactNode	-	What is measured
value	ReactNode	-	An Amount, a RollingNumber or text
delta	ReactNode	-	A Delta, on the line under the value
comparison	ReactNode	-	Against what: vs August
hint	ReactNode	-	A short note in the muted ink
trend	ReactNode	-	A small chart under the value, 40px tall
icon	Icon \| ReactElement	-	In place of the ◆
size	"md" \| "lg"	"md"	24px or 40px value
loading	boolean	false	Skeleton pieces in the final shape