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

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	info	Used to set the `DefaultCounterCard` text color.
count*	stringnumber		Used to set the amount of number that should be counted.
title*	string		Used to set the `DefaultCounterCard` title.
description	string	""	Used to set the `DefaultCounterCard` description.
prefix	stringnode	""	Used to set a prefix before the count.
suffix	stringnode	""	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

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	info	Used to set the `OutlinedCounterCard` text color.
count*	stringnumber		Used to set the amount of number that should be counted.
title*	string		Used to set the `OutlinedCounterCard` title.
prefix	stringnode	""	Used to set a prefix before the count.
suffix	stringnode	""	Used to set a suffix after the count.