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

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

// Soft UI Dashboard PRO React 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

PRO

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

1600

users active

+55%

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	dark	Used to set the `ComplexStatisticsCard` background image overlay color.
icon*	node		Used 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*	string		Used to set the `ComplexStatisticsCard` progress percentage. Its a required prop.
dropdown	bool{ action: func, menu: node, }	false	Used 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

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	info	Used to set the `AnimatedStatisticsCard` background image overlay color.
title*	string		Used to set `AnimatedStatisticsCard` title. Its a required prop.
count*	string		Used 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.