Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/stat-card.jsonUsage
import { StatCard } from "@/components/dithercn/stat-card";
export function Revenue() {
return (
<StatCard
label="Monthly recurring revenue"
value="$48,210"
delta={12.4}
deltaLabel="vs last month"
trend={[31.2, 34.6, 37.8, 41.2, 45.1, 48.2]}
/>
);
}delta is a percentage: 12.4 reads as +12.4%. It is green when it moves the good way and red when it doesn't, using the palette's green and red pulled slightly toward the text colour so the small text keeps its contrast. trend takes recent values, oldest first, and draws them as a line with a square marker on the latest value. Under it, fill="gradient" draws bands that thin out below the line in dither steps; dotted, hatched and solid fill the area evenly. color takes a palette name such as "blue", and bloom adds a soft glow behind the trend.
The card uses bg-card and a faint dot surface in the ink colour that fades out from the top right corner. Pass a className to change its background or width.
Examples
KPI row
Four cards in a grid. Latency and error rate set good="down", so latency going up is red and error rate going down is green. Each card has its own color, and latency, the one moving the wrong way, uses color="red" with fill="hatched" and a low bloom.
Without a trend
Leave trend out for a compact card, and delta out when there is nothing to compare. A delta of 0 is grey with no arrow.
Props
| Prop | Type | Default |
|---|---|---|
| label* What the number is. | Type: string | Default – |
| value* The headline number. Numbers get thousands separators; strings show as given. | Type: number | string | Default – |
| delta Change since the last period, in percent. | Type: number | Default – |
| deltaLabel What the change compares with, such as "vs last month". | Type: string | Default – |
| good Which direction counts as good, for the delta colour. | Type: "up" | "down" | Default "up" |
| trend Recent values, oldest first. Needs at least two. | Type: number[] | Default – |
| color Colour of the trend and the dot surface, a palette name or any CSS colour. | Type: DitherColor | Default "ink" |
| fill Texture under the trend line. | Type: "gradient" | "dotted" | "hatched" | "solid" | Default "gradient" |
| bloom Soft glow in the colour behind the trend. | Type: "off" | "low" | "high" | Default "off" |
| matrix Threshold pattern of the gradient fill. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
Notes
- Screen readers hear the label, the value and the delta in words, such as "Up 12.4% vs last month". The trend and the surface are decorative and hidden.
- The trend is drawn at the card's real width in CSS pixels, so cells stay square and crisp at any size. It redraws when the card resizes.
- Nothing moves, so there is nothing to reduce.