Stats Card

Stats cards are used to display key statistics and data points in a clear and concise manner, often found in dashboards.

Props

Prop	Type	Default	Description
icon	ReactNode	-	Optional icon component to display in the card.
title	string	-	The title or label for the statistic.
value	string	-	The main statistical value to display.
change	string	-	The change value (e.g., "+12.2%").
changeType	'increase' \| 'decrease'	'increase'	Determines the color of the change text.

Examples

Card Variations

Examples showing different configurations of the Stats Card.

Total Subscribers

71,897

+12.2%

Avg. Click Rate

24.57%

-3.2%

<>
  <StatsCard 
    icon={UsersIcon}
    title="Total Subscribers" 
    value="71,897" 
    change="+12.2%" 
    changeType="increase" 
  />
  <StatsCard
    title="Avg. Click Rate"
    value="24.57%"
    change="-3.2%"
    changeType="decrease"
  />
</>