Donut Breakdown

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
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"
/>