12 days ago

Design a modern, minimal, and clean Finance Tracker App UI using Tailwind CSS. The design theme should match a pregnancy-tracker–style mobile app, but focused on personal finance. General Style Requirements Modern neumorphic + glassmorphism blend Soft, rounded, high-radius cards Clean gradients Light/Dark mode versions Dashboard-first layout Smooth shadows and subtle animations Icons for all major features (Lucide/Feather) 📱 Screens to Include 1. Home Dashboard Monthly Overview Card Total Income Total Expenses Balance (Positive / Negative colors) Circular progress ring showing “Spent vs Budget” Quick-add buttons Add Income Add Expense Recent Transactions list Icon + category + time + amount Gradient header similar to PregApp 2. Add Transaction Screen Categories grid (Food, Bills, Salary, Shopping, EMI, Investments, etc.) Amount input (large bold number) Date & time picker Notes input Toggle: Income / Expense Submit button with gradient 3. Monthly Summary Screen Bar chart for monthly expenses Pie chart: category distribution Filters: This Month / Last Month / Custom Budget tracker cards Savings goal progress cards 4. Transaction Details Full transaction info Category icon Amount Date/time Notes Edit / Delete buttons 5. Settings Page Currency selection Theme (Light/Dark/System) Export data (CSV / PDF) Backup & Restore (Cloud / Local) 🎨 Design Guidelines Use Tailwind CSS Keep everything mobile-first Use rounded-3xl, shadow-lg, soft gradients Background: blurred circles like PregApp mood or weight screens Cards should have: backdrop-blur-md bg-white/70 (light mode) bg-neutral-900/60 (dark mode) Typography similar to PregApp: Headings: bold, large Labels: soft gray Numbers: strong, high contrast 🧩 Extra Details Include a bottom navigation bar: Home Add Insights Settings Use animated transitions between screens Include small micro-interactions (hover, tap, loading shimmer)

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates