Dashboard Components

Statistic cards, progress cards, chart containers, metric cards, a heatmap grid, property lists, definition lists and key‑value tables — built only with classes already shipped in cssvars.css. No custom CSS, no JS.

Statistic Cards

Total Revenue

$48,200

▲ 12.4% vs last month

Active Users

8,942

▲ 4.1% vs last month

Avg. Session

4m 12s

▼ 1.8% vs last month

Satisfaction

96.2%

▲ 0.6% vs last month

128K

Monthly Visitors

$54.2K

Monthly Revenue

3,481

Active Users

99.98%

Uptime

Progress Cards

Storage Used

62%

31 GB of 50 GB used

Sprint Progress

84%

21 of 25 tasks completed

Budget Spent

93%

$9,300 of $10,000 spent

Charts Container

Revenue Over Time

Monthly Quarterly Yearly

Chart renders here

Traffic Sources

Chart renders here

Metric Cards

New Orders

1,284

+18%

Support Tickets

37

+6%

Team Growth

+12

+9%

Uptime

99.98%

stable

Heatmap Grid

Activity — last 7 weeks

Less

Property List

Order #10492

Status Delivered

Customer Alex Rivera

Order Date July 12, 2026

Payment Method Visa •••• 4821

Total $214.50

API Rate Limit: 1,000 requests per minute per API key.
Uptime SLA: 99.9% monthly uptime, credited if breached.
Data Retention: Logs retained for 30 days, backups for 1 year.
Support Response: Priority tickets answered within 4 business hours.

Plan	Pro (annual)
Seats	25 / 50
Region	eu-west-1
Renewal Date	March 3, 2027
Status	Active

Keyboard Shortcut Cheat Sheet

Keys built with the .badge component on a light-grey background — no dedicated kbd class needed.

Navigation

Command palette Ctrl + K

Go to file Ctrl + P

Toggle sidebar Ctrl + B

Editing

Save Ctrl + S

Duplicate line Shift + Alt + ↓

Multi-cursor Ctrl + D

← Previous Next →