Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard23 } from "@/components/beste/piece/dashboard23";
<Dashboard23
title="Traffic by device"
total="9,420 sessions"
segments={[
{
"label": "Mobile",
"value": 58
},
{
"label": "Desktop",
"value": 32
},
{
"label": "Tablet",
"value": 8
},
{
"label": "Other",
"value": 2
}
]}
/>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.
Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
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.