- 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. |