The Stat component is a set of components for displaying statistic content. It's a composable component that you can use to display essential metrics or statistics in a readable manner.
Stat: The primary component that serves as the container for a single statistic. It's responsible for arranging the sub-components and giving the overall look and feel of the statistic.
StatLabel: This sub-component is used to represent the description of the statistic. It's generally a small piece of text that explains what the stat is about.
StatNumber: This is the heart of the Stat component. It's used to display the numeric value of the statistic. It's typically the most prominent part of the Stat, as it contains the actual value that we're interested in.
StatHelpText: This sub-component provides additional context or information about the statistic. It can be used to display a range of dates that the statistic covers, or any other explanatory text.
StatArrow: This sub-component is used to indicate a trend or change in the statistic. It shows either an upward or downward arrow based on the type prop (which can be either "increase" or "decrease"). This provides a visual indication of whether the stat has increased or decreased.
StatGroup: This component is used when you need to display a group of statistics. It acts as a container for multiple Stat components. It ensures the stats are arranged and spaced nicely, making it ideal for displaying several related statistics together.
These components can be imported as follows:
Adding an Indicator
In this example, we used the StatGroup component to group multiple Stat components. The StatArrow component is used to show the percentage increase or decrease of the corresponding stat. The type prop can be either "increase" or "decrease", which shows an up or down arrow respectively.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3