Stat

Used to display a statistic with a title and value.

Unique visitors: 192.1k

Usage

import { Stat } from "chakra-ui-solid";

<Stat.Root>
  <Stat.Label />
  <Stat.ValueText />
  <Stat.HelpText />
  <Stat.UpIndicator />
</Stat.Root>

Examples

Indicator

Here’s an example of how to display a statistic with an indicator.

Unique visitors: 192.1k

Value Unit

Here’s an example of how to display a value with a unit.

Time to complete: 3 hr20 min

Icon

Here’s an example of how to display a statistic with an icon.

Sales: $4.24k

Trend

Here’s an example of how to display a statistic with a trend indicator.

Unique: $8,456.40

Props

Root

StatRootProps
Prop	Default	Type
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| PresetVariant<'stat', 'size'>>` The type scale of the value alone — `xl`, `2xl`, `3xl`. The label, the help text and the unit hold their own sizes at every step, so this is the one number that grows.

Plus HTMLChakraProps<"dl"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.