Stat

Displays summary statistics or data points.

Usage

The Stat component is used to display a single statistic or data point, often with a label and a comparison to a previous period.

import { Stat } from "@elemnts-ui/react"

<Stat.Root>
  <Stat.Label>Total Revenue</Stat.Label>
  <Stat.ValueText>$45,231.89</Stat.ValueText>
  <Stat.HelpText>+20.1% from last month</Stat.HelpText>
</Stat.Root>

Examples

With Indicator

Use the Stat.Indicator to display a trend or status icon within the help text.

With Unit

Use the Stat.ValueUnit to display units next to the value.

API Reference

StatRoot

The root component for the stat.

Prop	Type	Default
asChild	`boolean`	`false`

StatLabel

The label for the stat.

Prop	Type	Default
asChild	`boolean`	`false`

StatValueText

The text value of the stat.

Prop	Type	Default
asChild	`boolean`	`false`

StatValueUnit

The unit of the value.

Prop	Type	Default
asChild	`boolean`	`false`

StatHelpText

The help text for the stat.

Prop	Type	Default
asChild	`boolean`	`false`