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
// Vision UI Dashboard PRO React examples
import DefaultStatisticsCard from "examples/Cards/StatisticsCards/DefaultStatisticsCard";
$230,220
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 below code contains a complete exmaple of DefaultStatisticsCard
including the dropdown menu functionality.
Mini Statistics Card
// Vision UI Dashboard PRO React examples
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
$53,000
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
// Vision UI Dashboard PRO React examples
import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
import from "react-icons/io5";
1600
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 below code contains a complete exmaple of ComplexStatisticsCard
including the dropdown menu functionality.
Animated Statistics Card
PRO
// Vision 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. |