Statistics Cards

The Statistics Cards components helps you to simply create a beautiful card displaying data in an interesting way.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Default Statistics Card

PRO
// Soft UI Dashboard PRO React examples import DefaultStatisticsCard from "examples/Cards/StatisticsCards/DefaultStatisticsCard";
sales
$230,220
+55% since last month
6 May - 7 May

Props Information

NameTypeDefaultDescription
title*stringUsed to set the DefaultStatisticsCard title. Its a required prop.
count*stringnumberUsed to set the DefaultStatisticsCard value or the important data you want to display. Its a required prop.
percentage{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], value: ["string", "number"], label: string }{ color: "success", value: "", label: "", }Used to set the DefaultStatisticsCard progress percentage content and style.
dropdownbool{ action: func, menu: node, value: string, }falseUsed to set the DefaultStatisticsCard dropdown menu, it should be an object with the following keys: `action`, `menu` and value.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The `value` should be a string its the content that will be visible as dropdown label.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of DefaultStatisticsCard including the dropdown menu functionality.

Mini Statistics Card

// Soft UI Dashboard PRO React examples import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
today's money
$53,000 +55%

Props Information

NameTypeDefaultDescription
bgColor'white''primary''secondary''info''success''warning''error''dark'whiteUsed to set the MiniStatisticsCard background color.
title*{ fontWeight: ["light", "regular", "medium", "bold"], text: string, }{ fontWeight: "medium", text: "", },Used to set the MiniStatisticsCard title text and style.
count*stringnumberUsed to set the MiniStatisticsCard value or the important data you want to display. Its a required prop.
percentage{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "white"], text: ["string", "number"], }{ color: "success", text: "", }Used to set the MiniStatisticsCard progress percentage content and style.
icon*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], component: node }Used to set MiniStatisticsCard icon and icon box color. It should be mentioned that the color will only work if the `backgroundColor` is white otherwise the icon box background color will be white.
directionrightleftrightUsed to set the content and icon order.

Complex Statistics Card

PRO
// Soft UI Dashboard PRO React examples import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
1600
users active
+55%

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the ComplexStatisticsCard background image overlay color.
icon*nodeUsed to set ComplexStatisticsCard icon. Its a required prop.
count*{ number: ["string", "number"], label: string }Used to set the ComplexStatisticsCard value or the important data you want to display. Its a required prop.
percentage*stringUsed to set the ComplexStatisticsCard progress percentage. Its a required prop.
dropdownbool{ action: func, menu: node, }falseUsed to set the ComplexStatisticsCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of ComplexStatisticsCard including the dropdown menu functionality.

Animated Statistics Card

PRO
// Soft UI Dashboard PRO React examples import AnimatedStatisticsCard from "examples/Cards/StatisticsCards/AnimatedStatisticsCard";

earnings

$15,800

 +15% since last week 
view more

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the AnimatedStatisticsCard background image overlay color.
title*stringUsed to set AnimatedStatisticsCard title. Its a required prop.
count*stringUsed to set AnimatedStatisticsCard value or the important data you want to display. Its a required prop.
percentage*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark",], label: string }Used to set the AnimatedStatisticsCard label content and color.
action*{ type: ["internal", "external"], route: string, label: string }Used to set the AnimatedStatisticsCard route and action button content.