Stat

A single metric with label, value, help text and a trend indicator.

Total users24,52112.4% from last month

Bounce rate18.2%3.1% from last month

"use client";

import { Stat, HStack } from "astralis-ui";

export function StatDemo() {
  return (
    <HStack gap="10" wrap="wrap" justifyContent="center">
      <Stat>
        <Stat.Label>Total users</Stat.Label>
        <Stat.Value>24,521</Stat.Value>
        <Stat.HelpText>
          <Stat.Indicator type="increase">12.4%</Stat.Indicator> from last month
        </Stat.HelpText>
      </Stat>
      <Stat>
        <Stat.Label>Bounce rate</Stat.Label>
        <Stat.Value>18.2%</Stat.Value>
        <Stat.HelpText>
          <Stat.Indicator type="decrease">3.1%</Stat.Indicator> from last month
        </Stat.HelpText>
      </Stat>
    </HStack>
  );
}

Import#

import { Stat } from "astralis-ui";
// Stat.Label, .Value, .HelpText, .Indicator

Usage#

Values render with tabular numerals so dashboards line up; the indicator colors green for increase and red for decrease — note that "decrease" is just the arrow direction, not a judgment (a falling bounce rate is good news).

Props#

The parts take only children and className, except:

Prop	Type	Default	Description
`Stat.Indicator type`	`"increase" \| "decrease"`	`"increase"`	Arrow direction and color.

Compose Stats in a Grid or HStack for dashboard rows, and inside a Card for tiles.