SingleStatCard
Hero stat tile rendering one big number with a label and optional delta indicator. Displays a single statistic with optional animations and variants.
Hero stat tile rendering one big number with a label and optional delta indicator.
Displays a single statistic with optional animations and variants.
import { SingleStatCard } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
name | Optional | string | undefined | — | Stat name/label |
subtitle | Optional | string | undefined | — | Subtitle text |
value | Optional | string | number | null | undefined | — | Stat value |
unit | Optional | string | undefined | — | Unit of measurement |
color | Optional | string | undefined | — | Color for flash/border |
flash | Optional | boolean | undefined | — | Enable flash animation |
superflash | Optional | boolean | undefined | — | Enable superflash animation (faster) |
variant | Optional | SingleStatCardVariant | undefined | — | Card variant |
row | Optional | boolean | undefined | — | Row layout |
Usage
Prominent stat tile for displaying a single key metric. Supports flash animations and four visual variants.
Minimal example
import { SingleStatCard } from "@tetherto/mdk-react-devkit";
<SingleStatCard name="Hashrate" value={95.5} unit="TH/s" variant="primary" />
Example
import { SingleStatCard } from '@tetherto/mdk-react-devkit'export const SingleStatCardExample = () => ( <div className="mdk-example-row"> <SingleStatCard name="Hashrate" value={95.5} unit="TH/s" variant="primary" /> <SingleStatCard name="Efficiency" value={28.3} unit="J/TH" variant="secondary" /> <SingleStatCard name="Temperature" value={65} unit="°C" variant="highlighted" /> <SingleStatCard name="Consumption" value={3250} unit="W" variant="tertiary" /> </div>)