GoAsk Design System
Stats

KpiCard

The classic dashboard number: label, value, a delta pill with what it compares to, and optionally an icon or menu, a sparkline along the bottom, and a footer link.

React · shadcn/uiWeb component · LitCSS · no build

React

shadcn/ui + Tailwind v4
Revenue
$12.7K
▲ 16.5%vs last month
Churned accounts
14
▲ 3from 11
View report →
Hours this week
31.5
▲ 4.5vs last week
Loading

CSS

CSS, no build
Revenue
$12.7K
▲ 16.5%vs last month
Churned accounts
14
▲ 3from 11
View report →
Hours this week 31.5 ▲ 4.5 vs last week

Web component

Lit, works in any app

Always say what the delta compares to (caption). action replaces the icon with your own control (a menu, a period select). loading shows skeleton bars.