Stat Card
Metric tile with value and trend.
Applications
128
+12%vs last week
Interviews
6
-25%vs last week
Bounce rate
18%
-4%improving
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/stat-card.jsonUsage
import {
StatCard, StatCardLabel, StatCardValue, StatCardTrend,
} from "@/components/ui/stat-card";
<StatCard>
<StatCardLabel>Revenue</StatCardLabel>
<StatCardValue>$12,400</StatCardValue>
<StatCardTrend delta={8.2}>vs last month</StatCardTrend>
</StatCard>invert flips the coloring for metrics where a drop is good (errors, bounce
rate, load time).
Accessibility
- Values use tabular numerals so rows of tiles align.
- The trend arrow is decorative; the signed percentage carries the meaning as text.