Density

Stat

Stat is a utility component for metrics-first text. It renders label/value pairs in a consistent density-compatible order with local numeric typography on the value and local label typography on the label and unit.

Use label and unit to keep metric text in the correct DOM order: label first, value second, and unit last.

CPU97
import { Stat } from "density-base-ui";

export default function StatExample() {
  return <Stat label="CPU" value="97" />;
}

value is required and uses the component’s local numeric typography. label and unit use the component’s local label typography when rendered. Primary and secondary emphasis colors apply consistently to the value and unit. Use color for semantic metric status. Use orientation="vertical" to stack label above the value group while keeping value and unit on one line; vertical labels use the compact sm size while the value and unit retain the Stat’s size scope. The value uses the base typeface by default; set monospace to opt into the monospace typeface.

Animate

Set animate with a numeric value to count up from zero when the Stat mounts. Change animationKey to replay an enabled animation. Formatted string values remain static.

CPU0
import { Button, Stat, View } from "density-base-ui";
import { RefreshCw } from "lucide-react";
import { useState } from "react";

export default function StatAnimateExample() {
  const [animationKey, setAnimationKey] = useState(0);

  return (
    <View>
      <Stat animationKey={animationKey} animate label="CPU" value={97} />
      <Button onClick={() => setAnimationKey((key) => key + 1)}>
        <RefreshCw aria-hidden="true" size={14} />
        Replay animation
      </Button>
    </View>
  );
}

Orientation

Horizontal42Vertical42
import { Stat, View } from "density-base-ui";
export default function StatOrientationExample() {
  return (
    <View orientation="horizontal" padding={false}>
      <Stat label="Horizontal" orientation="horizontal" value="42" />
      <Stat label="Vertical" orientation="vertical" value="42" />
    </View>
  );
}

Vertical size

Vertical Stats keep labels compact while their value and unit use each supported Density size.

Requests128Requests128Requests128Requests128Requests128Requests128Requests128Requests128
import { Stat, View } from "density-base-ui";

export default function StatVerticalSizeExample() {
  return (
    <View>
      <Stat label="Requests" orientation="vertical" size="2xs" value="128" />
      <Stat label="Requests" orientation="vertical" size="xs" value="128" />
      <Stat label="Requests" orientation="vertical" size="sm" value="128" />
      <Stat label="Requests" orientation="vertical" size="md" value="128" />
      <Stat label="Requests" orientation="vertical" size="lg" value="128" />
      <Stat label="Requests" orientation="vertical" size="xl" value="128" />
      <Stat label="Requests" orientation="vertical" size="2xl" value="128" />
      <Stat label="Requests" orientation="vertical" size="3xl" value="128" />
    </View>
  );
}

Unit

Latency18ms
import { Stat } from "density-base-ui";
export default function StatUnitExample() {
  return <Stat label="Latency" value="18" unit="ms" />;
}

Color

Errors18openQueue42jobsUptime99.99%
import { Stat, View } from "density-base-ui";

export default function StatColorExample() {
  return (
    <View padding={false}>
      <Stat color="destructive" label="Errors" value="18" unit="open" />
      <Stat color="warning" label="Queue" value="42" unit="jobs" />
      <Stat color="success" label="Uptime" value="99.99" unit="%" />
    </View>
  );
}

Monospace

Revenue$42,384Revenue$42,384
import { Stat, View } from "density-base-ui";
export default function StatMonospaceExample() {
  return (
    <View orientation="horizontal" padding={false}>
      <Stat label="Revenue" value="$42,384" />
      <Stat label="Revenue" monospace value="$42,384" />
    </View>
  );
}

Emphasis

Default42runsPrimary97%Secondary15ms
import { Stat, View } from "density-base-ui";

export default function StatEmphasisExample() {
  return (
    <View>
      <Stat label="Default" value="42" unit="runs" />
      <Stat label="Primary" value="97" unit="%" emphasis="primary" />
      <Stat label="Secondary" value="15" unit="ms" emphasis="secondary" />
    </View>
  );
}

Size

2xs128xs128sm128md128lg128xl1282xl1283xl128
import { Stat, View } from "density-base-ui";
export default function StatSizeExample() {
  return (
    <View>
      <Stat label="2xs" value="128" size="2xs" />
      <Stat label="xs" value="128" size="xs" />
      <Stat label="sm" value="128" size="sm" />
      <Stat label="md" value="128" size="md" />
      <Stat label="lg" value="128" size="lg" />
      <Stat label="xl" value="128" size="xl" />
      <Stat label="2xl" value="128" size="2xl" />
      <Stat label="3xl" value="128" size="3xl" />
    </View>
  );
}