Expense trackerPro

• Spending donut
• Budget bars with warnings
• Quick add
• Recent expenses

• Personal finance, team spend and budgeting tools.

• Accounting ledgers: use a data table.

Import it from @/components/blocks/expense-tracker after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { ExpenseTracker } from "@/components/blocks/expense-tracker";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ExpenseTracker />
    </main>
  );
}

• Budget bars are labelled progressbars; amounts are text; categories are a labelled radio group.

• Budget bars fill with a stagger; new expenses slide in; the donut highlights a category when you hover its bar.

• Two columns from 1024px.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Generate the tip from real month-to-date data.