React Counter Cards - Soft UI
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
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. |