Server Component · 0 KB client JS

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>
  );
}

Total users24,52112.4% from last month

size

align

import { Stat } from "astralis-ui";

<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>

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).

Size#

size scales the label, value and help text together, so a resized Stat stays in proportion instead of growing one line and leaving the others behind. It is responsive, which is what lets one Stat serve a dense dashboard tile and a marketing band.

Monthly revenue · sm$48,2008.1% from last month

Monthly revenue · md$48,2008.1% from last month

Monthly revenue · lg$48,2008.1% from last month

Monthly revenue · xl$48,2008.1% from last month

"use client";

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

const sizes = ["sm", "md", "lg", "xl"] as const;

export function StatSizes() {
  return (
    <VStack gap="6" alignItems="start">
      {sizes.map((size) => (
        <Stat key={size} size={size}>
          <Stat.Label>Monthly revenue · {size}</Stat.Label>
          <Stat.Value>$48,200</Stat.Value>
          <Stat.HelpText>
            <Stat.Indicator type="increase">8.1%</Stat.Indicator> from last month
          </Stat.HelpText>
        </Stat>
      ))}
    </VStack>
  );
}

{/* big on desktop, back in its box on a two-up mobile grid */}
<Stat size={{ base: "lg", lg: "xl" }} align="center">
  <Stat.Value>99.9%</Stat.Value>
  <Stat.Label>Uptime</Stat.Label>
</Stat>

Children render in the order you write them, so a marketing band can lead with the value while a dashboard tile leads with the label.

Props#

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Scales label, value and help text together. md suits dashboards, xl marketing bands. Responsive.
`align`	`"start" \| "center" \| "end"`	`"start"`	How the lines align within the stat. Responsive.

Parts#

Prop	Type	Default	Description
`Stat.Label / Value / HelpText`	`span props`	None	The three lines. Each takes its size from the root.
`Stat.Indicator`	`type?: "increase" \| "decrease"`	None	Trend arrow inside the help text, colored for the direction.

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