Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard16 } from "@/components/beste/piece/dashboard16";
<Dashboard16
service="api.prod.example"
uptime="99.94%"
days={[
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"outage",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"degraded",
"degraded",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"degraded",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up",
"up"
]}
startLabel="60 days ago"
endLabel="Today"
/>Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Real-time counter with a pinging status dot in the tone color, a large monospace value, and a per-second rate.
Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.
Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.