Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard5 } from "@/components/beste/piece/dashboard5";
<Dashboard5
title="Top sources"
items={[
{
"label": "Direct",
"value": 4820
},
{
"label": "Google",
"value": 3610
},
{
"label": "Twitter",
"value": 1890
},
{
"label": "Referral",
"value": 980
}
]}
tone="violet"
/>Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.
Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.
Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.
Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.
Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.