Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Stat

Used to display a statistic with a title and value.

SourceStorybookRecipe
AI TipWant to skip the docs? Use the MCP Server
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'

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.

Explorer

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

Unique visitors
192.1kâ–² 12%
Compared to last week
New signups
85usersâ–¼ 8%
Compared to last week

Component Anatomy

Hover to highlight, click to select parts

root

label

helpText

valueText

valueUnit

indicator

stat.recipe.ts

Previous

QR Code

Next

Table