Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

KPI Cards

Tailwind CSS KPI cards and stat summaries for dashboards, analytics, operations, and reporting interfaces.

A lead metric spans the header, while smaller brand rows and badges fill the grid beneath it.

Four glassy status cards repeat the same device tile with a switch and short meta row.

Small metric tiles line up in one row, with labels, values, and deltas kept equally weighted.

A four-card grid keeps each contact metric in its own short tile with minimal supporting text.

Each metric card pairs an icon block with one value and a short delta line.

Three small stats sit in one divided card, with each column reduced to a number and label.

One large number, a short label, and a change marker sit inside a single tinted card.

A short grid of icon-led cards splits the summary into separate metric tiles.

Compact role cards combine totals, small labels, and avatar groups in a short row.

Each tile starts as a simple metric card, with the secondary panel appearing on hover.

The card is reduced to one value, one label, and one small comparison line.

A soft icon chip and small badge sit above the main value in a short vertical stack.

The number stays central, with the icon in the header and one inline link at the bottom.

Several compact stats share one container, separated by spacing instead of individual card borders.

The icon, number, label, and change line are centered into one vertical stack.

Several metrics sit in one row, with dividers separating each value block.

A short stat group shares the card with one trailing add action in the header.

© 2026 Preline Labs.

;