Pieces/Dashboard(33)

Dashboard pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

This week

Mon – Sun

Booked

142

+9

No-shows

3

-4

Hours

96

0

KPI Trio Card

A wide panel with a titled header row and three metrics split by vertical hairlines, each carrying its own signed change.

Collected this month

$92.4K+8.6%

vs last month

KPI Sparkline Card

A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.

Shared Drive

Northwind_Brand_Guidelines.pdf
Launch_Copy_Deck_v4.docx
Media_Budget_2026.xlsx
Homepage_Wireframes.pdf
Retro_Notes_March.docx

Drive File List

A floating files panel listing document rows, each with a colored file-type chip and a truncating filename.

Signups382
+12%
Revenue$18.4K
+6%
MAU9.8K
+3%

Sparkline Row

Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.

ARR$1.82M+8.4%
Churn2.1%-0.3%
NPS48+6%

Metric Trio

Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.

Recent invoices
AccountPlanAmount
Atlas LabsScale$820
NorthwindPro$420
HemlockPro$420
Stoic & Co.Starter$120

Mini Table

Three-column data table with a sort arrow on the active column and monospaced right-aligned amounts in each row.

Unread50 total
  • Email14
  • Slack32
  • Push4

Notification Inbox

Channel-level unread inbox with email, Slack, and push rows, each showing a tinted icon tile and a rose count badge.

Milestones
DesignApr 2
BuildApr 12
QAApr 22
LaunchMay 3

Milestone Timeline

Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.

Services
  • APIOperational
    99.99%
  • IngestDegraded
    99.82%
  • BillingOperational
    99.97%
  • WorkersOperational
    99.95%

Service List

Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.

Last 24hpeak at 14:00
0006121824

Hourly Strip

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

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

Stacked Bar

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

Weekly sessions
186/ 220
34 to targetmax 300

Bullet Chart

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

68%
Storage used34 GB of 50 GB

Progress Circle

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

2Critical
6Warning
14Info

Alert Summary

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

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

Rating Breakdown

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

Sessions
This weekLast week

Compare Lines

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

Live requests
2,418+24 / sec

Live Counter

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

api.prod.example99.94%
60 days agoToday

Uptime Status

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

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

Activity Rings

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

System health
82
Healthy

Health Gauge

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

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

Goal Card

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

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

Cohort Retention

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

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

Leaderboard

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

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

Metric Comparison

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

Markdown version