- Unique visitors
- 192.1k
import { StatLabel, StatRoot, StatValueText } from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel>Unique visitors</StatLabel>
<StatValueText>192.1k</StatValueText>
</StatRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
stat snippet
npx @chakra-ui/cli snippet add statThe snippet includes a closed component composition for the Stat component.
Usage
import { StatLabel, StatRoot, StatValueText } from "@/components/ui/stat"<StatRoot>
<StatLabel />
<StatValueText />
<StatHelpText>
<StatUpIndicator />
<StatDownIndicator />
</StatHelpText>
</StatRoot>Examples
Format Options
Pass the formatOptions to the StatValueText component to format the value.
- Revenue
- $935.40
import { StatLabel, StatRoot, StatValueText } from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel>Revenue</StatLabel>
<StatValueText
value={935.4}
formatOptions={{ style: "currency", currency: "USD" }}
/>
</StatRoot>
)
}
Indicator
Here's an example of how to display a statistic with an indicator.
- Unique visitors
- 192.1k 1.9%
import {
StatDownTrend,
StatLabel,
StatRoot,
StatValueText,
} from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel>Unique visitors</StatLabel>
<StatValueText>192.1k</StatValueText>
<StatDownTrend variant="plain" px="0">
1.9%
</StatDownTrend>
</StatRoot>
)
}
Info Tip
Pass the info prop to the StatLabel component to display an info tip.
- Unique Some info
- 192.1k
import { StatLabel, StatRoot, StatValueText } from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel info="Some info">Unique </StatLabel>
<StatValueText>192.1k</StatValueText>
</StatRoot>
)
}
Value Unit
Here's an example of how to display a value with a unit.
- Time to complete
- 3 hr20 min
import {
StatLabel,
StatRoot,
StatValueText,
StatValueUnit,
} from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel>Time to complete</StatLabel>
<StatValueText alignItems="baseline">
3 <StatValueUnit>hr</StatValueUnit>
20 <StatValueUnit>min</StatValueUnit>
</StatValueText>
</StatRoot>
)
}
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 { ProgressBar, ProgressRoot } from "@/components/ui/progress"
import {
StatHelpText,
StatLabel,
StatRoot,
StatValueText,
} from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot maxW="240px">
<StatLabel>This week</StatLabel>
<StatValueText
value={1340}
formatOptions={{
currency: "USD",
style: "currency",
maximumFractionDigits: 0,
}}
/>
<StatHelpText mb="2">+12% from last week</StatHelpText>
<ProgressRoot>
<ProgressBar />
</ProgressRoot>
</StatRoot>
)
}
Icon
Here's an example of how to display a statistic with an icon.
- Sales
- $4.24k
import { HStack, Icon } from "@chakra-ui/react"
import { StatLabel, StatRoot, StatValueText } from "@/components/ui/stat"
import { LuDollarSign } from "react-icons/lu"
const Demo = () => {
return (
<StatRoot maxW="240px" borderWidth="1px" p="4" rounded="md">
<HStack justify="space-between">
<StatLabel>Sales</StatLabel>
<Icon color="fg.muted">
<LuDollarSign />
</Icon>
</HStack>
<StatValueText>$4.24k</StatValueText>
</StatRoot>
)
}
Trend
Here's an example of how to display a statistic with a trend indicator.
- Unique
- $8,456.40 12%
import { HStack } from "@chakra-ui/react"
import {
StatHelpText,
StatLabel,
StatRoot,
StatUpTrend,
StatValueText,
} from "@/components/ui/stat"
const Demo = () => {
return (
<StatRoot>
<StatLabel>Unique </StatLabel>
<HStack>
<StatValueText
value={8456.4}
formatOptions={{ style: "currency", currency: "USD" }}
/>
<StatUpTrend>12%</StatUpTrend>
</HStack>
<StatHelpText>since last month</StatHelpText>
</StatRoot>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
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.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. |