Alert Summary

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

2Critical
6Warning
14Info

New here? Read the installation guide.

Import & use
import { Dashboard20 } from "@/components/beste/piece/dashboard20";

<Dashboard20
  counts={{
    "critical": 2,
    "warning": 6,
    "info": 14
  }}
  criticalLabel="Critical"
  warningLabel="Warning"
  infoLabel="Info"
/>

More Dashboard pieces

View all Dashboard
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

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

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.

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.

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.

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

Top List

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

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.

Markdown version