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 and you can use all of its props.


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

// Material Kit 2 React Examples import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard";

Design Blocks

Mix the sections, change the colors and unleash your creativity

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoUsed to set the DefaultCounterCard count number color.
count*numberUsed to set the amount of number that should be counted.
titlestringUsed to set the DefaultCounterCard title.
descriptionstring""Used to set the DefaultCounterCard description.