Stat and metric display components.

Basic Stats

1,234
Total Users
$12,345
Revenue
567
Orders
89%
Satisfaction

Stats with Trends

$847,392
Total Revenue
+12.5%
24,583
Active Users
-5.2%
3.47%
Conversion Rate
0%

Stats with Icons

1,234
Total Users
$45,678
Revenue
567
Orders
+12%
Growth

Hero Stats

Total Revenue
$847,392
+12.5%
Active Users
24,583
-5.2%
Conversion Rate
3.47%
0%

5-step sentiment scale · v2.7.0

The hero delta scale grew from 3 (positive / negative / neutral) to 5 with the addition of very_positive and very_negative for outlier deltas. Neutral colour shifted from --pc-text-color-2 (grey) to --pc-neutral. Compare the five deltas side-by-side below.

ARR
$12.4M
+38.1% breakout
MRR
$847K
+12.5%
Latency p95
148 ms
±0.7%
Churn
2.4%
-5.2%
Cloud Spend
$103K
-38% collapse

Square Stats

42
Tasks
18
%
Completed
7
Pending
3
Failed

Square stats — mixed units · v2.6.0

v2.6.0 redesigned pa-stat--square so the decorative __symbol watermark sits inline with the big __number. Markup order alone drives visual order — pass is_prefix_symbol to render the symbol BEFORE the number for prefix currencies ($847K, ¥12.4M); leave it off for suffix units (87%, 23°C). Number font-size scales with the tile width via cqi (container-query inline-size), so a row of squares stays balanced regardless of grid breakpoint.

87
%
Completion
23
°C
Server temp
$
847K
MRR
¥
12.4M
JPY revenue

Square stats — fit-to-box + progressive disclosure · v2.9.0-rc04

Opt into fit mode with is_fit on a variant="square" stat. It emits data-pa-stat-fit and wires the PureAdminStatFit hook (pa-stat-fit.js). The primary __number is sized to fill the tile at the largest font that still fits — never overflows, independent of character count (a pure-CSS cqi clamp can't guarantee that). A priority ladder reveals rows as the tile earns both width and height: __number (P0) → __symbol (P1) → __label (P2) → __change (P3) → __context (P4). Fit mode requires a height source on the tile (each tile below sets an explicit height).

Priority ladder — same content, growing box

Watch the tiers appear as each tile gets taller / wider. Smallest shows the number only; the largest reveals all five rows. The number always fits and stays maxed.

$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago

Char-count independence — same box, different numbers

All four tiles are the same size. Each number fills its box at the max font that fits, whatever the character count.

1
Res Version
92
Contracts
$ 847K
Revenue
¥ 12.4M
Tokyo Office

Wide banner layout (pa-stat--fit-wide)

Once a fit tile is ≥ 32rem wide, pa-stat-fit.js toggles the pa-stat--fit-wide class and the tile flips to a horizontal banner — the number fills the left, the metadata stacks in a column to its right. This full-width tile is wide enough to trigger it; the narrow one above stacks vertically.

$ 847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago · FY2026 Q2

Stat Cards

87%
Completion Rate
94%
Customer Satisfaction
62%
Market Share
78%
Server Capacity

John Doe

Administrator

Settings

Press Ctrl+K to preview the palette.
Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.
Commands
🚀
Deploy to Environment
Deploy a branch to an environment
g d
👤
Assign to User
Assign an item to a team member
g a
🧭
Go to Page
Navigate to a page
g g
🎨
Switch Theme
Change the visual theme
g t
Search
📦
Products
Search products
:products
📋
Orders
Search orders
:orders
👥
Users
Search users
:users
🧾
Invoices
Search invoices
:invoices