CSS-only data visualization components for admin dashboards. Progress bars, rings, gauges, heatmaps, sparklines, and more.
1. Progress Bars
Default (with labels)
Storage Used
65%
Upload Progress
89%
Color Variants
Sizes
XS
SM
Default
LG
Striped & Animated
Rounded (Pill)
2. Stacked Bars
Disk Usage (256 GB)
Browser Market Share
3. Progress Rings
Color Variants
72%
CPU
94%
Uptime
58%
Memory
87%
Disk
43%
Network
Sizes
65%
65%
Default
65%
Large
4. Dashboard Gauges
72%
0
CPU
100
45%
0
Memory
32 GB
85°
0°C
Temp
100°C
62
0
Speed
100
Size override · v2.7.0 :size attr
New :size attr emits --pc-gauge-size inline (default upstream 12rem). Width and height (always half the width) both derive from this token. Text inside the donut doesn't auto-scale — set font-size on .pa-gauge__value in your stylesheet for proportional resizing.
68%
0
8rem
100
68%
0
12rem (default)
100
68%
0
16rem
100
68%
0
20rem
100
5. Data Bars in Tables
| # | Sales Rep | Revenue | Performance | Target | Status |
|---|---|---|---|---|---|
| 1 | Sarah Chen | $142,500 | 95% | On Track | |
| 2 | James Wilson | $128,300 | 85% | On Track | |
| 3 | Maria Garcia | $98,700 | 66% | At Risk | |
| 4 | Tom Baker | $76,200 | 51% | Behind | |
| 5 | Lisa Park | $112,900 | 75% | Steady |
6. Activity Heatmap
Contribution Activity (12 weeks)
Less
More
Color Variant (Success)
7. Sparkline Bars
Revenue (7d)
Orders (7d)
Errors (7d)
Traffic (14d)
8. Combined: KPI Dashboard
Total Revenue
$284,520
+12.5% vs last month
Active Users
8,429
+3.2% vs last week
Error Rate
0.24%
+0.02% vs yesterday
System Health
72%
CPU
58%
Memory
87%
Disk
99%
Uptime
Storage Breakdown
Server Cluster Storage
845 GB / 1 TB