Budgeting app UI template.
A complete UI design for a budgeting and expense tracking app: eight phone screens with one month of realistic money data, from the overview and budgets to statistics and accounts. The totals add up on every screen, and every screen is plain HTML with Tailwind, so Codex or Claude Code can clone it and turn it into your app.
Updated November 6, 2026
Mobile app · 8 screens · Free and open source
01Overview 
02Add transaction 
03Transactions 
04Transaction detail 
05Budgets 
06Statistics 
07Accounts 
08Profile
Clone it
npx degit ummydev/ui-templates/apps/budgeting my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the Budgeting app template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
What’s in the template
| Screen | What’s on it |
|---|---|
| Overview | The month’s balance, income and spending, budget progress, and recent transactions |
| Add transaction | Expense or income, an amount keypad, categories, account, date, and a note |
| Transactions | Search, filters, and transactions grouped by day with daily totals |
| Transaction detail | Amount, category, account, date, note, a receipt, and splitting the bill |
| Budgets | What’s left to spend this month, each category’s budget, and an overspending alert |
| Statistics | Spending by category, the last six months, and top merchants |
| Accounts | Net worth across bank, savings, cash, credit, and investment accounts |
| Profile | Profile, streaks, currency, reminders, data export, and settings |
The sample data is one person’s November in US dollars: $5,500.00 in, $2,674.38 out, eight budgets totaling $3,020.00, and a net worth equal to the sum of the accounts. Income is green with a plus sign, spending uses the text color with a minus sign, and red appears only on the category that went over budget.
Each screen is one HTML file at 390×844, styled with Tailwind CSS v4 and a shared tokens.css, with charts drawn in SVG. Open any file in a browser; there is nothing to install or build.
Use it with Codex or Claude Code
Copy just this template from the ui-templates repository:
npx degit ummydev/ui-templates/apps/budgeting my-budget-app
Then ask your agent to make it yours:
This folder is a budgeting app UI template. Turn it into [your app name], for [who it's for]. Keep DESIGN.md and tokens.css as the design system, change the currency to [your currency] and the categories to [your categories], and keep every total consistent across screens. Then build these screens in [Expo / SwiftUI / your stack].
Because the design system is written down in DESIGN.md, new screens your agent adds, such as savings goals or recurring bills, will match the eight that are already there.
Built on the Wallet design system
The template uses Wallet, a design system for finance apps: clear balances in Manrope with tabular figures, one steady green, 18px corners, and 48px touch targets. Its page has a live preview, the full DESIGN.md, and a shadcn theme.
Frequently asked questions
Is this budgeting app template free?
Yes. It’s open source under the MIT license, for personal and commercial projects.
Do the numbers really add up?
Yes. Balances, budgets, chart percentages, and net worth are consistent across all eight screens, so the design still makes sense when you or your agent change one number and follow it through.
Is there a dark theme?
Yes. Add class="dark" to the <html> tag of any screen to switch it to Wallet’s dark theme.