Stat

Usage

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

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

Examples

Format Options

Use the FormatNumber component within Stat.ValueText to format the value.

Indicator

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

Info Tip

Compose the InfoTip and Stat.Label components to display an info tip.

Value Unit

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

Progress Bar

Here's an example of how to display a statistic with a progress bar.

Icon

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

Trend

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

Closed Component

Here's how to setup the Stat for a closed component composition.

Props

Root

Explorer

Explore the Stat component parts interactively. Click on parts in the sidebar to highlight them in the preview.