Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Stat

Used to display a statistic with a title and value.

SourceStorybookRecipe
Unique visitors
192.1k

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.

Revenue
$935.40

Indicator

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

Unique visitors
192.1k
1.9%

Info Tip

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

Unique
192.1k

Value Unit

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

Time to complete
3 hr20 min

Progress Bar

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

This week
$1,340
+12% from last week

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
12%
since last month

Closed Component

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

import { Badge, Stat as ChakraStat, FormatNumber, Show } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
import * as React from "react"

interface StatProps extends ChakraStat.RootProps {
  label?: React.ReactNode
  value?: number
  info?: React.ReactNode
  valueText?: React.ReactNode
  formatOptions?: Intl.NumberFormatOptions
  change?: number
}

export const Stat = React.forwardRef<HTMLDivElement, StatProps>(
  function Stat(props, ref) {
    const { label, value, valueText, change, info, formatOptions, ...rest } =
      props
    return (
      <ChakraStat.Root {...rest}>
        {label && (
          <ChakraStat.Label>
            {label}
            {info && <InfoTip>{info}</InfoTip>}
          </ChakraStat.Label>
        )}
        <ChakraStat.ValueText {...rest} ref={ref}>
          {valueText ||
            (value != null && formatOptions && (
              <FormatNumber value={value} {...formatOptions} />
            ))}
        </ChakraStat.ValueText>
        {change != null && (
          <Badge colorPalette={change > 0 ? "green" : "red"} gap="0">
            <Show when={change > 0} fallback={<ChakraStat.DownIndicator />}>
              <ChakraStat.UpIndicator />
            </Show>
            <FormatNumber
              value={Math.abs(change)}
              style="percent"
              maximumFractionDigits={2}
            />
          </Badge>
        )}
      </ChakraStat.Root>
    )
  },
)

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'sm' | 'md' | 'lg'

The size of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

Spinner

Next

Status