Components
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() {Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/metric-value.jsonAlso 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} />Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.