Avala Design
← Components/layout

StatsCard

KPI / metric display card. Preserves legacy @avala/ui StatsCard API. Renders a label, a primary value (large tabular-nums), an optional delta with up/down/neutral trend coloring, and an optional secondary description.

layoutstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { StatsCard } from "@avala/design";

<StatsCard size="md" size="md">StatsCard</StatsCard>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

layout-statscard--defaultOpen in Storybook →