dashboardcn

Search documentation

Search for a page or component.

Distribution Card

PreviousNext

A total with delta, a stacked share bar, and a ranked list of the contributors with their values.

Capital inflows
$12.4M+$390K
  • WaveMark Capital
    Capital in$7.93M
  • Envato Finances
    Capital in$3.21M
  • QBridge Tech
    Capital in$1.25M
"use client"

import * as React from "react"

A total with delta, a stacked bar showing how it splits, and a ranked list of the contributors with their values. Use it for capital inflows, revenue by source, or storage by type.

Installation

pnpm dlx shadcn@latest add @dashboardcn/distribution-card

Also installs card, button, dropdown-menu, tooltip from shadcn/ui if missing.

Usage

import { DistributionCard } from "@/components/distribution-card"

<DistributionCard
  title="Capital inflows"
  total={12400000}
  delta={390000}
  valueLabel="Capital in"
  items={[
    { name: "WaveMark Capital", value: 7928400, icon: <Gem />, color: "var(--color-teal-500)" },
    { name: "Envato Finances", value: 3214900, icon: <Hexagon />, color: "var(--color-amber-500)" },
    { name: "QBridge Tech", value: 1246300, icon: <Triangle />, color: "var(--color-orange-500)" },
  ]}
  options={[
    { value: "3", label: "Top 3 funds" },
    { value: "5", label: "Top 5 funds" },
  ]}
/>