Card | NextJS Material Dashboard 2 @ Creative Tim

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

Name	Type	Default	Description
title*	string		Used to set the `DefaultStatisticsCard` title. Its a required prop.
count*	stringnumber		Used 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.
dropdown	bool{ action: func, menu: node, value: string, }	false	Used 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

Name	Type	Default	Description
bgColor	'white''primary''secondary''info''success''warning''error''dark'	white	Used 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*	stringnumber		Used 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.
direction	rightleft	right	Used 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

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''light''dark'	dark	Used to set the `ComplexStatisticsCard` color.
icon*	node		Used to set `ComplexStatisticsCard` icon. Its a required prop.
title*	string		Used 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.