dashboardcn
1

Allocation Card

PreviousNext

A share-of-total card with a period switcher, a big percentage with delta, a tick bar, and a footer stat with an avatar stack.

Portfolio allocation
46%+3.4%vs prior period
Equities exposure: $4.7M
shadcnEvil RabbitK
6 members
import { AllocationCard } from "@/registry/dashboardcn/blocks/allocation-card"

export default function AllocationCardDemo() {

Installation

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

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

Usage

import { AllocationCard } from "@/components/allocation-card"

<AllocationCard
  title="Portfolio allocation"
  description="Share of assets under management held in equities."
  value={0.46}
  delta={0.034}
  deltaLabel="vs prior period"
  periods={[
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  stat={{ label: "Equities exposure", value: "$4.7M" }}
  people={[
    { name: "shadcn", src: "https://github.com/shadcn.png" },
    { name: "Kai" },
  ]}
  peopleLabel="6 members"
/>