Finance Overview

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard8.tsx instead.

Usage

The file also exports dashboard8Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard8, dashboard8Demo } from "@/components/blocks/dashboard/dashboard8";

export default function Page() {
  return <Dashboard8 {...dashboard8Demo} />;
}

Props

Types

type NavItem = { label: string; href: string; active?: boolean };
type AccountTile = { name: string; balance: string };
type HeroBalance = { label: string; value: string; delta?: string; accounts: AccountTile[] };
type KpiItem = { label: string; value: string; helper?: string };
type CashflowMonth = { month: string; net: number };

// colorClassName is a "text-*" utility, used as the donut segment's stroke
// color via currentColor and reused (prefix swapped to "bg-*") for the legend dot.
type SpendingCategory = { label: string; value: number; colorClassName: string };

type TransactionRow = {
  date: string;
  description: string;
  category: string;
  categoryColorClassName: string; // a "bg-*" utility for the row's category dot
  amount: number;
  type: "income" | "expense";
};

Behavior notes

• This block is a plain server component: every number and chart is computed at render time from fixed props, with no client-side state or interaction anywhere.
• The cashflow chart colors each month's bar from the sign of its own net value (emerald for non-negative, red for negative); it does not take separate income/expense arrays.
• The spending-mix percentages shown in the legend are derived by dividing each category's value by the sum of all categories' values, so they always add up to 100% regardless of what units value is in.
• The donut chart's segment colors come directly from each category's colorClassName; the legend dot reuses the same color by swapping the class prefix from text- to bg-, so the two never fall out of sync.
• Transaction amounts are colored by the row's own type field (emerald for income, red for expense) independent of the numeric sign of amount, which is always stored as a positive number.