Counter Cards

The Counter Cards components helps you to simply create a beautiful animations that display numerical data in a more interesting way. It uses react-countup in base.


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 Counter Card

PRO
// Soft UI Dashboard PRO React examples import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard";

GB

internet
all devices

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the DefaultCounterCard text color.
count*stringnumberUsed to set the amount of number that should be counted.
title*stringUsed to set the DefaultCounterCard title.
descriptionstring""Used to set the DefaultCounterCard description.
prefixstringnode""Used to set a prefix before the count.
suffixstringnode""Used to set a suffix after the count.

Outlined Counter Card

// Soft UI Dashboard React examples import OutlinedCounterCard from "examples/Cards/CounterCards/OutlinedCounterCard";
earnings

$

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the OutlinedCounterCard text color.
count*stringnumberUsed to set the amount of number that should be counted.
title*stringUsed to set the OutlinedCounterCard title.
prefixstringnode""Used to set a prefix before the count.
suffixstringnode""Used to set a suffix after the count.