A banking overview with a total balance card, a gradient debit card, income versus expenses bars, a spending donut, recent transactions and savings goals you can top up.
Here is how your money moved in October
$44,260.50
•••• •••• •••• 4821
Last 6 months
October
Across all accounts
Add a little each week
npx shadcn@latest add https://hyperblur.dev/r/finance-dashboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/finance-dashboard.tsx.
import { FinanceDashboard } from "@/components/hyperblur/finance-dashboard"
<FinanceDashboard owner="Dana Reyes" defaultRange="6M" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Accent color for the card gradient, income bars, active nav item and focus rings. |
| brand | string | "Marlow" | Bank name shown in the sidebar and on the card. |
| owner | string | "Dana Reyes" | Account holder. Used in the greeting, on the card and for the avatar. |
| range | "6M" | "12M" | Controlled range of the income chart. Pair with onRangeChange. | |
| defaultRange | "6M" | "12M" | "6M" | Initial range when uncontrolled. |
| onRangeChange | (range: FinanceRange) => void | Called when the range toggle changes. | |
| defaultHidden | boolean | false | Start with balances masked. Users can toggle it with the Hide balances button. |