Chakra UI Stat - Horizon UI

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

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>
<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>
<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
"brand" | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | ... 4 more ...

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

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License