Skip to content
Pinky UI

Stat Card

A headline number with a label, an optional up/down/flat trend, and a mini-chart slot.

  • cards
  • card
  • structural
  • data
  • metric

Monthly active users

48,203

12.4% this week

Quick usage

usage
import { StatCard } from "@pinky-ui/components";

<StatCard
  label="Monthly active users"
  value="48,203"
  trend={{ direction: "up", label: "12.4% this week" }}
/>

Presets

Default

Label and value only.

With trend

Adds the up/down/flat indicator.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
labelReactNode—Required.
valueReactNode—Required. The headline number — rendered with tabular figures so it doesn't reflow as it updates.
trend{ direction: "up" | "down" | "flat"; label: string }—Optional. Direction is carried by the arrow's shape and by label's text, never by colour alone.
descriptionReactNode—Optional supporting text below the trend.
chartReactNode—Optional mini-chart slot next to the value — this component doesn't draw one itself.
radius"md" | "lg" | "xl" | "2xl""xl"Corner radius from the shape scale.
paddedbooleantrueInner content padding.
shadow"neutral" | "pink""neutral"Shadow token pair. Structural cards should stay neutral.

Accessibility

  • Not focusable as a whole — a stat is something a page shows, not something it navigates from.
  • Trend direction is never colour-only: an arrow glyph and a text label (e.g. "12.4% this week") both carry it.

Reduced motion

No motion of its own.

When to use

  • Dashboards, KPI rows, anything reporting a single tracked number

When not to use

  • Several related metrics that need to be compared side by side in one chart — use a systems chart component instead