Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard9 } from "@/components/beste/piece/dashboard9";
<Dashboard9
slices={[
{
"label": "Subscriptions",
"value": 52
},
{
"label": "One-time",
"value": 28
},
{
"label": "Add-ons",
"value": 14
},
{
"label": "Refunds",
"value": 6
}
]}
total="$48.2K"
totalLabel="Revenue"
/>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.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.