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#

Collected Fees
£0.00
Feb 12 - Feb 28
Editable Example

Stat with Indicator#

Sent
345,670
increased by23.36%
Clicked
45
decreased by9.05%
Editable Example

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

Proudly made inNigeria by Segun Adebayo