A calm personal money overview on warm paper, with a month switcher that moves every number: net worth with its trend marker, a spending donut, budget envelopes that hatch when overspent, a bills calendar and savings goal rings. Also ships a dark appearance.
Rent$1,650 / $1,650
Groceries$614 / $520
Dining out$278 / $260
Transport$176 / $180
Subscriptions$58 / $75
Fun$220 / $200
npx shadcn@latest add https://hyperblur.dev/r/dashboard-finance-personal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-finance-personal.tsx.
import { DashboardFinancePersonal } from "@/components/hyperblur/dashboard-finance-personal"
<DashboardFinancePersonal user="Sofia Lind" appearance="light" />| Prop | Type | Default | Description |
|---|---|---|---|
| user | string | "Sofia Lind" | Name used in the greeting. |
| appearance | "light" | "dark" | "light" | Color scheme. |
| accent | string | "#5b6cff" | Accent for the net worth line, bill days and focus. |
| currency | string | "$" | Currency symbol. |
| months | string[] | ["Jun", ... "Nov"] | Months in the switcher, as three-letter English abbreviations. |
| month | number | Controlled month index. Pair with onMonthChange. | |
| defaultMonth | number | last month | Initial month index when uncontrolled. |
| onMonthChange | (index: number) => void | Called when a month is picked. | |
| categories | { name: string; budget: number; color: string }[] | 6 categories | Spending categories with their monthly budget. |
| goals | { name: string; target: number; saved: number; color: string }[] | 3 goals | Savings goals shown as rings. |
| bills | { name: string; day: number; amount: number; auto?: boolean }[] | 6 bills | Recurring bills by day of month. |