Stat

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

chakra ui pro

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>

Props#

  • StatLabel, StatHelpText, StatNumber composes Text component.
  • StatArrow composes Icon component.
  • Stat and StatGroup composes Box component.

colorScheme

Description

Color Schemes for Stat are not implemented in the default theme. You can extend the theme to implement them.

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

size

Type
"md"
Default
"md"

variant

Description

Variants for Stat are not implemented in the default theme. You can extend the theme to implement them.

Type
string
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel