Components
Stat Card
A hand-drawn card preset for dashboard metrics with an optional trend arrow.
Revenue
$12,400
+8% this week
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/stat-card.jsonProps
PropTypeDefaultDescription
animateOnHoverbooleantrueRedraws the sketch lines on hover.
descriptionReactNode—
Secondary descriptive content.
idstring—
Optional stable id used for sketch seeding and accessibility.
label*string—
Optional label text shown with the component.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
trendTrendDirection== "flat") return;Trend direction shown alongside the value.
trendLabelstring—
Short text shown next to the trend indicator.
value*ReactNode—
Controlled value for the component.
Trends
Users
2,840
+12%
Churn
3.2%
-0.4%
Sessions
18.5k
no change
With description
Monthly active users
9,210
+5%vs last month
Accessibility
StatCard is a presentational summary container with no landmark role by default. Repeat the metric label and trend in text so users are not relying on the drawn arrow alone.
Examples
import { StatCard } from "@/components/crumble/ui/stat-card";
<StatCard
label="Revenue"
value="$12,400"
trend="up"
trendLabel="+8% this week"
/>;