Stat
Used to display a statistic with a title and value.
AI TipWant to skip the docs? Use the MCP Server
- Unique visitors
- 192.1k
import { Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root> <Stat.Label>Unique visitors</Stat.Label> <Stat.ValueText>192.1k</Stat.ValueText> </Stat.Root> ) } 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
import { FormatNumber, Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root> <Stat.Label>Revenue</Stat.Label> <Stat.ValueText> <FormatNumber value={935.4} style="currency" currency="USD" /> </Stat.ValueText> </Stat.Root> ) } Indicator
Here's an example of how to display a statistic with an indicator.
- Unique visitors
- 192.1k 1.9%
import { Badge, Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root> <Stat.Label>Unique visitors</Stat.Label> <Stat.ValueText>192.1k</Stat.ValueText> <Badge colorPalette="red" variant="plain" px="0"> <Stat.DownIndicator /> 1.9% </Badge> </Stat.Root> ) } Info Tip
Compose the InfoTip and Stat.Label components to display an info tip.
- UniqueSome info
- 192.1k
import { Stat } from "@chakra-ui/react" import { InfoTip } from "@/components/ui/toggle-tip" const Demo = () => { return ( <Stat.Root> <Stat.Label> Unique <InfoTip>Some info</InfoTip> </Stat.Label> <Stat.ValueText>192.1k</Stat.ValueText> </Stat.Root> ) } Value Unit
Here's an example of how to display a value with a unit.
- Time to complete
- 3 hr20 min
import { Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root> <Stat.Label>Time to complete</Stat.Label> <Stat.ValueText alignItems="baseline"> 3 <Stat.ValueUnit>hr</Stat.ValueUnit> 20 <Stat.ValueUnit>min</Stat.ValueUnit> </Stat.ValueText> </Stat.Root> ) } Progress Bar
Here's an example of how to display a statistic with a progress bar.
- This week
- $1,340 +12% from last week
import { FormatNumber, Progress, Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root maxW="240px"> <Stat.Label>This week</Stat.Label> <Stat.ValueText> <FormatNumber value={1340} style="currency" currency="USD" maximumFractionDigits={0} /> </Stat.ValueText> <Stat.HelpText mb="2">+12% from last week</Stat.HelpText> <Progress.Root> <Progress.Track> <Progress.Range /> </Progress.Track> </Progress.Root> </Stat.Root> ) } Icon
Here's an example of how to display a statistic with an icon.
- Sales
- $4.24k
import { HStack, Icon, Stat } from "@chakra-ui/react" import { LuDollarSign } from "react-icons/lu" const Demo = () => { return ( <Stat.Root maxW="240px" borderWidth="1px" p="4" rounded="md"> <HStack justify="space-between"> <Stat.Label>Sales</Stat.Label> <Icon color="fg.muted"> <LuDollarSign /> </Icon> </HStack> <Stat.ValueText>$4.24k</Stat.ValueText> </Stat.Root> ) } Trend
Here's an example of how to display a statistic with a trend indicator.
- Unique
- $8,456.40 12%
import { Badge, FormatNumber, HStack, Stat } from "@chakra-ui/react" const Demo = () => { return ( <Stat.Root> <Stat.Label>Unique </Stat.Label> <HStack> <Stat.ValueText> <FormatNumber value={8456.4} style="currency" currency="USD" /> </Stat.ValueText> <Badge colorPalette="green" gap="0"> <Stat.UpIndicator /> 12% </Badge> </HStack> <Stat.HelpText>since last month</Stat.HelpText> </Stat.Root> ) } 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
| Prop | Default | Type |
|---|---|---|
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.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether 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 weekComponent Anatomy
Hover to highlight, click to select parts
root
label
helpText
valueText
valueUnit
indicator
stat.recipe.ts