dashboardcn
1

Breakdown Card

PreviousNext

A total with delta and a list of contributors, each with a value and a hatched bar showing its share.

Gross volume
$41,540+15.0%
  • Online payments$26,800
  • Subscriptions$10,400
  • In-store sales$4,340
import { Ellipsis } from "lucide-react"

import { Button } from "@/components/ui/button"

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/breakdown-card.json

Also installs card, tooltip from shadcn/ui if missing.

Usage

import { BreakdownCard } from "@/components/breakdown-card"

<BreakdownCard
  title="Gross volume"
  total={41540}
  delta={0.15}
  items={[
    { name: "Online payments", value: 26800, color: "var(--color-emerald-500)" },
    { name: "Subscriptions", value: 10400, color: "var(--color-blue-500)" },
    { name: "In-store sales", value: 4340, color: "var(--color-pink-500)" },
  ]}
/>