# Expense tracker

> Spending by category, budget bars that warn, quick add and recent expenses.

Block · Pro · https://lodeui.com/blocks/expense-tracker

## When to use

- Personal finance, team spend and budgeting tools.

## When not to use

- Accounting ledgers: use a data table.

## Installation

```bash
npx shadcn@latest add @lode/expense-tracker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ExpenseTracker } from "@/components/blocks/expense-tracker";

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

Built from: Donut chart, Number ticker

## API reference

### ExpenseTracker

Monthly spending with a category donut, budget bars that warn near the limit, an AI tip, quick add and recent expenses. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through quick add |
| ← / → | Pick a category |
| Enter | Add the expense |

## Accessibility

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

## Motion

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

## Responsive behavior

- Two columns from 1024px.

## Performance

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

## Notes for AI

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

## Related

- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.
- [Treemap](https://lodeui.com/components/treemap) — Squarified rectangles sized by value, for revenue mix, storage and market caps.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.