Home screen with income and outcome trend cards, recent transactions, and bottom navigation
Transaction History
Full-screen transaction history with search, filter chips, grouped day sections, and bottom navigation
Add Transaction
Full-screen form to add an expense or income transaction with amount, note, date, and category selection
Analytics Overview
Full-screen analytics dashboard with income/expense cards, 3-month bar chart, spending trend line chart, and tab navigation
Analytics Breakdown
Full-screen expense breakdown with donut chart, category icons, and itemized list of spending by category
Goals Screen
Full-screen goals dashboard with mini goal cards, all-goals list with progress, and bottom navigation
Goals Details Screen
Goal detail screen with header background image, avatar, goal stats, progress card, recap cards, and recent transactions list
Profile & Settings Screen
Profile and settings screen with header background image, user avatar, and grouped settings sections
AI GENERATED
Components
50 components — 100% vibe-coded by Cursor AI from Figma designs
◆
Foundation
9
Colors, typography, spacing, and design tokens
Aa
Typography
Colors
Primitive Colors
Spacing
Shadows
Radius
Gradients
Containers
Widths
■
Basic Components
9
Buttons, cards, avatars, and core UI elements
Buttons
Avatar
Avatar with Icon
Chip
Icon Frame
Media Slot
Text Divider
Section Title
Tag
☰
Forms & Inputs
9
Input fields, tabs, filters, and interactive controls
Amount Input
Transaction Text Input
Search Field
List Item
Card Menu Item
Filter Chip
Tab Item
Tab Bar
Setting Single
↔
Navigation
3
Nav bars, bottom tabs, and indicators
Bottom Nav Bar
Navigation Bar
Home Indicator Bar
●
Data Display
8
Cards, charts, and data visualization components
Balance Card
Activity Item
Billing Item
Recap Card
Income & Outcome Trend Card
Income & Expense Card
Tooltip
Indicator Dots
♦
Finance Specific
12
Payment cards, goals, charts, and finance UI
Card Element
Card Type Icon
Payment Method Icon
Goals Card Default
Goals Card Minimize
Goals Card Details
Progress Bar with Controller
Category Icon
Category Breakdown Item
Expense Chart
Spending Chart
Income & Expense Chart
MIT Licensed · Free Forever
The future of UI development?
See what vibecoding can do. All components and screens are 100% AI-generated from Figma designs.
View on GitHub
Read Docs
DESIGN CREDIT
Original Figma Design
This UI kit is based on the Finmori Figma design by Zoey Do, available free on Figma Community.
"A huge thank you to Zoey Do for her incredible design work and dedication. Her attention to detail and creative vision made this UI kit possible. We're deeply grateful for her hard work and generosity in sharing this with the community."
Finmori · Figma Community
Created by Zoey DO
Figma ↗
Finmori ReactNative
A proof of concept for AI-powered design-to-code. All components & screens 100% vibe-coded from Figma.