StatCard

Usage

StatCard is a small, opinionated KPI tile. Pass a label for the caption and a value for the headline number. Numbers go through toLocaleString(); pass a pre-formatted string when you need a currency symbol or a unit that does not belong to unit.

import { StatCard } from '@epasslive/design-system'

<StatCard
  label="Tickets sold"
  value={12480}
  unit="tickets"
  trend={{ direction: 'up', value: '+12.4%', label: 'vs last week' }}
/>

<StatCard
  label="Avg. order value"
  value={68.4}
  trend={{ direction: 'flat', value: 'unchanged' }}
/>

Trends

The trend prop is an object with a direction ("up" | "down" | "flat") and a value string that is rendered verbatim (so format it the way you want it to read). Direction drives both the arrow glyph and the color — emerald for up, rose for down, muted for flat. An optional label is appended in muted text and included in the aria-label ("Trend increased by +12.4% vs last week").

Loading state

Set loading to swap the body for a three-line shimmer skeleton and expose aria-busy="true" on the wrapper. The skeleton cycles through three opacity phases every 600 ms; the current phase is also exposed as data-skeleton-phase on the skeleton root for end-to-end testing.

Clickable card

Pass href to render the body inside an <a>. The wrapper stays role="article" so the announcement does not change, and the link picks up a teal focus ring (ep-teal) with a 2px offset. Use it for dashboard tiles that drill into a detail page.

Dark mode

The card uses bg-ep-surface-card and border-ep-border, which flip automatically with the active theme. Trend colors stay semantic (emerald = good, rose = bad) on both themes — the icons themselves are inline SVGs using currentColor, so the contrast tracks the surrounding text.

Props