Metric

Ready

Stat card with delta and trend.

Active members

2,847+12.5%

vs. last month

Churn rate

2.1%-0.4%

vs. last month

Installation

$ npx @oratiq-js/ui add metric

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { Metric } from "@/components/ui/metric";

Values use tabular figures — a live-updating metric doesn't jitter.
The delta arrow is a trend glyph, so it mirrors under RTL.
positiveIsBad flips the colour logic for metrics where a fall is good (churn, costs, errors).

Prop	Type	Default	Description
`label`*	`string`	—	What is being measured.
`value`*	`ReactNode`	—	The headline number.
`delta`	`number`	—	Signed percent change.
`positiveIsBad`	`boolean`	`false`	Invert good/bad colouring.