Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Top sources

1Direct

4,820

2Google

3,610

3Twitter

1,890

4Referral

980

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

Import & use

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"
/>