# Metric

A small label over a large figure.

Source: [metric.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/metric.tsx)

```tsx
import { Badge } from "@/components/ui/badge";
import { Metric, MetricLabel, MetricValue } from "@/components/ui/metric";

export default function MetricGrid() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
      <Metric>
        <MetricLabel>Revenue</MetricLabel>
        <MetricValue>$48,210</MetricValue>
        <Badge variant="success">+12.4%</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Active users</MetricLabel>
        <MetricValue>2,184</MetricValue>
        <Badge variant="success">+3.1%</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Open tasks</MetricLabel>
        <MetricValue>37</MetricValue>
        <Badge variant="warning">+8 this week</Badge>
      </Metric>
      <Metric>
        <MetricLabel>Uptime</MetricLabel>
        <MetricValue>99.98%</MetricValue>
        <span className="text-xs text-faint">Last 30 days</span>
      </Metric>
    </div>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/metric
```

## Usage

```tsx
import { Metric, MetricLabel, MetricValue } from "@/components/ui/metric";

export function RevenueMetric() {
  return (
    <Metric>
      <MetricLabel>Revenue</MetricLabel>
      <MetricValue>$48,210</MetricValue>
    </Metric>
  );
}
```

## Composition

- `Metric`
  - `MetricLabel`
  - `MetricValue`

## Examples

### With a trend

A badge can show the change. Put the direction in its text, not just its color.

```tsx
import { Badge } from "@/components/ui/badge";
import { Metric, MetricLabel, MetricValue } from "@/components/ui/metric";

export default function MetricWithBadge() {
  return (
    <Metric className="w-full max-w-48">
      <MetricLabel>Revenue</MetricLabel>
      <MetricValue>$48,210</MetricValue>
      <Badge variant="success">+12.4% from last month</Badge>
    </Metric>
  );
}
```

### With a caption

```tsx
import { Metric, MetricLabel, MetricValue } from "@/components/ui/metric";

export default function MetricWithCaption() {
  return (
    <Metric className="w-full max-w-48">
      <MetricLabel>Uptime</MetricLabel>
      <MetricValue>99.98%</MetricValue>
      <span className="text-xs text-faint">Last 30 days</span>
    </Metric>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `Metric` | `<div>` |
| `MetricLabel` | `<p>` |
| `MetricValue` | `<p>` |