Stat

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

Live — this one is real

Illustrative build duration

1.2s

18% example decrease

Synthetic readings, not a Mizu performance measurement.

Usage

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."
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Records.tsx

Source is included in the npm package under src/data/Records.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
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.

Works alongside

DataTable DescriptionList BarChart Sparkline