# Stat

A metric with context: direction and favorability are separate decisions.

- Family: Data, imported from `mizu-ui` or `mizu-ui/data`
- Docs: https://mizu.user64bit.world/components/stat
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/data/Records.tsx

## Usage

```tsx
import { Stat } from "mizu-ui";

export function Example() {
  return (
    <Stat
      label="Illustrative build duration"
      value="1.2s"
      change={{
        value: "18% example decrease",
        direction: "down",
        favorable: true,
      }}
      detail="Synthetic readings, not a Mizu performance measurement."
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/stat
```

## Props

- `label / value`: `string / ReactNode`. Metric name and reading.
- `change`: `{value, direction, favorable?}`. Text, trend and whether that trend is desirable.
- `detail`: `string`. Supporting context.

## Accessibility

The direction is readable and announced independently of color. A falling value is not automatically bad.

## Motion

Static measurement.