MetricValue

The KPI number, with MetricUnit for the unit.

A tight-tracking display for a KPI’s number. Units and other trailing text go in MetricUnit.

export const client = "only";

import { MetricValue, MetricUnit } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="flex w-[30rem] flex-col gap-2">
      <MetricValue size="sm">¥120,400</MetricValue>
      <MetricValue>
        ¥1,240,000 <MetricUnit>/ 月</MetricUnit>
      </MetricValue>
      <MetricValue size="lg">128</MetricValue>
      <MetricValue size="xl">
        2.1 <MetricUnit>%</MetricUnit>
      </MetricValue>
    </div>
  );
}

import { MetricValue, MetricUnit, metricValueVariants } from "@squadbase/vantage/components";

It carries vertical margin (my-4) by default. Inside a card, pass className="my-0" to sit flush.

<DashboardCardPreset title="Revenue">
  <MetricValue className="my-0">$12,400</MetricValue>
  <TrendIndicator value={12.4} direction="up" />
</DashboardCardPreset>