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
// NextJS Material Dashboard 2 PRO 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

PRO
// NextJS Material Dashboard 2 PRO 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

// NextJS Material Dashboard 2 Examples import ComplexStatisticsCard from "/examples/Cards/StatisticsCards/ComplexStatisticsCard";
Today's Users

2,300


3% than last month

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'darkUsed to set the ComplexStatisticsCard color.
icon*nodeUsed to set ComplexStatisticsCard icon. Its a required prop.
title*stringUsed to set ComplexStatisticsCard title. 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{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], amount: ["string", "number"], label: string }Used to set the ComplexStatisticsCard percentage text and style.