dashboardcn

Search documentation

Search for a page or component.

Metric Value

PreviousNext

A formatted number that abbreviates large values (e.g. $158K) and shows the full value in a tooltip on hover. Every card in this registry renders its numbers through it.

$158K1.23M12.4%$41,194

Values from 100,000 up are abbreviated. Hover one to see the full value, or set compactFrom to change the threshold.

1,234,567$41.2K98 ms
import { MetricValue } from "@/components/ui/metric-value"

export default function MetricValueDemo() {

The number formatter used by every card here. It renders currency, percent, compact, and plain numbers, abbreviates large values to K, M, and B, and shows the full value in a tooltip on hover.

Installation

pnpm dlx shadcn@latest add @dashboardcn/metric-value

Also installs tooltip from shadcn/ui if missing.

Usage

import { MetricValue } from "@/components/ui/metric-value"

<MetricValue value={158143} format="currency" maximumFractionDigits={0} />
<MetricValue value={1234567} />
<MetricValue value={41194} format="currency" maximumFractionDigits={0} />
<MetricValue value={1234567} compactFrom={Infinity} />