Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard24 } from "@/components/beste/piece/dashboard24";
<Dashboard24
title="Last 24h"
peak="peak at 14:00"
values={[
2,
1,
0,
0,
1,
2,
4,
8,
14,
22,
28,
34,
38,
42,
48,
40,
36,
30,
22,
18,
14,
10,
6,
4
]}
hourLabels={[
"00",
"06",
"12",
"18",
"24"
]}
tone="violet"
/>Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Channel-level unread inbox with email, Slack, and push rows, each showing a tinted icon tile and a rose count badge.