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
}
]}
/>Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.
Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.
Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.