Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard18 } from "@/components/beste/piece/dashboard18";
<Dashboard18
title="Sessions"
currentLabel="This week"
previousLabel="Last week"
current={[
22,
28,
24,
33,
31,
40,
46
]}
previous={[
18,
21,
26,
25,
29,
32,
30
]}
tone="violet"
/>Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.
Real-time counter with a pinging status dot in the tone color, a large monospace value, and a per-second rate.
Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.
Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.
Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.