Skip to content
codexa

Dashboards · React

Personal budget

Income, spending and savings by month, with categories and recent transactions for a household budget.

Use this templateRemix
Personal budget starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A calm household budget: income against spending for the last year, where this month's money went, recent transactions and upcoming bills. Accounts, categories and amounts live in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-budget

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Pocketbook",  "user": {    "name": "Jordan Ellis",    "role": "Household budget"  },  "nav": [    {      "label": "Overview",      "icon": "home",      "href": "#overview"    },    {      "label": "Cash flow",      "icon": "chart",      "href": "#trends"    },    {      "label": "Categories",      "icon": "box",      "href": "#breakdown"    },    {      "label": "Transactions",      "icon": "book",      "href": "#table"    },    {      "label": "Bills",      "icon": "calendar",      "href": "#activity"    }  ],  "title": "September budget",  "subtitle": "Joint account and savings, updated today",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "Spent",      "value": "$5,085",      "delta": "6.5%",      "up": false,      "upIsGood": false    },    {      "label": "Saved",      "value": "$1,365",      "delta": "$355",      "up": true    },    {      "label": "Savings rate",      "value": "21.2%",      "delta": "5.5 pts",      "up": true    },    {      "label": "Emergency fund",      "value": "$14,820",      "delta": "$600",      "up": true    }  ],  "chart": {    "title": "Income vs spending",    "type": "bar",    "unit": "$",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "Income",        "values": [          6200,          6200,          7400,          6200,          6200,          6450,          6450,          6450,          6450,          6450,          6450,          6450        ]      },      {        "name": "Spending",        "values": [          5310,          5480,          6920,          4870,          4960,          5240,          5390,          5120,          5680,          6110,          5440,          5085        ]      }    ]  },  "side": {    "title": "Where September went",    "items": [      {        "label": "Rent",        "value": "$1,950",        "pct": 38      },      {        "label": "Childcare",        "value": "$820",        "pct": 16      },      {        "label": "Groceries",        "value": "$742",        "pct": 15      },      {        "label": "Transport",        "value": "$388",        "pct": 8      },      {        "label": "Utilities",        "value": "$296",        "pct": 6      },      {        "label": "Eating out",        "value": "$264",        "pct": 5      },      {        "label": "Everything else",        "value": "$625",        "pct": 12      }    ]  },  "table": {    "title": "Transactions",    "columns": [      "Payee",      "Category",      "Date",      "Amount",      "Status"    ],    "statusColumn": 4,    "tones": {      "Cleared": "good",      "Pending": "warn",      "Recurring": "accent"    },    "rows": [      [        "Greenway Market",        "Groceries",        "Sep 29",        "-$86.40",        "Cleared"      ],      [        "Brookside Rentals",        "Rent",        "Sep 28",        "-$1,950.00",        "Recurring"      ],      [        "Metro Transit",        "Transport",        "Sep 27",        "-$96.00",        "Cleared"      ],      [        "City Water & Power",        "Utilities",        "Sep 26",        "-$148.20",        "Pending"      ],      [        "Little Oaks Nursery",        "Childcare",        "Sep 25",        "-$820.00",        "Recurring"      ],      [        "Salary, Hartwell Labs",        "Income",        "Sep 25",        "+$3,225.00",        "Cleared"      ],      [        "Noodle Bar 9",        "Eating out",        "Sep 24",        "-$42.50",        "Cleared"      ]    ]  },  "feed": {    "title": "Upcoming bills",    "items": [      {        "text": "Car insurance renewal, $612",        "time": "Due Oct 4"      },      {        "text": "Internet, $55 (autopay)",        "time": "Due Oct 8"      },      {        "text": "Transfer $600 to the emergency fund",        "time": "Scheduled Oct 10"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from Personal budget's files. The box is already started for you: finish “Start from Personal budget and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Personal budget

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates