Pieces/Dashboard

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

MRR$48.2K
+12.4%vs last month

KPI Tile

dashboard1

Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.

Active users+6.8%
4,821

Sparkline Card

dashboard2

Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.

Revenue$48.2K
Orders1,284
Users9.4K
Events62.1K

Widget Grid

dashboard3

Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.

Activity
Ada Lovelacejoined
2m
Marcus R.created Project Orion
14m
Priya S.edited Onboarding doc
1h
Tomás L.archived Q1 specs
3h

Activity Feed

dashboard4

Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

dashboard5

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Visit
12,400
Sign-up
3,42072%
Active
1,98042%
Paid
62069%

Funnel

dashboard6

Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.

Date Range Toolbar

dashboard7

Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.

Events this week2,840
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Weekly Bars

dashboard8

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Donut Breakdown

dashboard9

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

Conversion rate+12%
Last week3.41%
This week3.82%

Metric Comparison

dashboard10

Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.

Top performers
Ada L.12,840
Marcus R.10,320
Priya S.8,960

Leaderboard

dashboard11

Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.

Retention
W0W1W2W3W4
W0
100
64
48
41
38
W1
100
71
55
46
W2
100
68
52
W3
100
74

Cohort Retention

dashboard12

Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.

Q2 revenue goal
$148Kof $240K
$92K to goal28 days left

Goal Card

dashboard13

Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.

System health
82
Healthy

Health Gauge

dashboard14

Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.

  • Move
    72 kcal
  • Exercise
    54 min
  • Stand
    88 hr

Activity Rings

dashboard15

Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.

api.prod.example99.94%
60 days agoToday

Uptime Status

dashboard16

Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.

Live requests
2,418+24 / sec

Live Counter

dashboard17

Real-time counter with a pinging status dot in the tone color, a large monospace value, and a per-second rate.

Sessions
This weekLast week

Compare Lines

dashboard18

Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.

4.6
1,284 reviews
5
980
4
208
3
62
2
24
1
10

Rating Breakdown

dashboard19

Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.

2Critical
6Warning
14Info

Alert Summary

dashboard20

Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.

68%
Storage used34 GB of 50 GB

Progress Circle

dashboard21

Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.

Weekly sessions
186/ 220
34 to targetmax 300

Bullet Chart

dashboard22

Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.

Traffic by device9,420 sessions
  • Mobile58%
  • Desktop32%
  • Tablet8%
  • Other2%

Stacked Bar

dashboard23

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

Last 24hpeak at 14:00
0006121824

Hourly Strip

dashboard24

Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.