Stat

As the name implies, the `Stat` component is used to display some statistics.

    SourceTheme Source@chakra-ui/stat

Import#

import {
Stat,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
} from '@chakra-ui/react'

Basic Usage#

<Stat>
<StatLabel>Collected Fees</StatLabel>
<StatNumber>£0.00</StatNumber>
<StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>

Stat with Indicator#

<StatGroup>
<Stat>
<StatLabel>Sent</StatLabel>
<StatNumber>345,670</StatNumber>
<StatHelpText>
<StatArrow type='increase' />
23.36%
</StatHelpText>
</Stat>
<Stat>
<StatLabel>Clicked</StatLabel>
<StatNumber>45</StatNumber>
<StatHelpText>
<StatArrow type='decrease' />
9.05%
</StatHelpText>
</Stat>
</StatGroup>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel