Components docs
Every component an app can have, with live examples.
00 · Apps
Apps
App icons
01 · Non-generative
Non-generative
Form
Table
Expenses
| ID | Item | Amount | Category | Date | Source |
|---|---|---|---|---|---|
| #5 | Nasi lemak | RM 8.50 | Food | 2026-10-02 | form |
| #4 | Grab to office | RM 14.00 | Transport | 2026-10-02 | voice |
| #3 | Electricity | RM 126.40 | Bills | 2026-10-01 | form |
| #2 | Cinema | RM 36.00 | Fun | 2026-09-28 | voice |
| #1 | Groceries | RM 92.30 | Food | 2026-09-27 | form |
5 entries
Chart
Bar
By category
sum of amount by categoryLine
By week
sum of amount by date (week)Pie
Share by category
sum of amount by categorySummary card
Spent this month
RM 1.2K
sum · this month
Entries this week
12
count · this week
Average spend
RM 32.60
avg · all time
Calendar
Agenda
This month
October 2026Heatmap
Daily spending
October 202601 · Non-generative
Block views
Hero
Number
Hero
RM 1.2K
Spent this month
Full
Hero
RM 1.2K
Spent this month
Stat
Single
Stat
Spent
RM 1.2K
this month
Side by side
Stat
Spent
RM 1.2K
Entries
38
Progress
Bar
Progress
Ring
Progress
Monthly budget
RM 1.2K of RM 1.5K
Over target
Progress
Badge
Tones
Badge
Conditional
Badge
Spent RM 1,240.00 this month.
Icon
Chip
Icon
Per entry
Icon
Bars
Ranked
Bars
By category
Chart
Bar
Chart
By category
Line
Chart
By week
Pie
Chart
Share
Text
Heading and text
Text
This month
You have spent RM 1,240.00 so far.
Updated Thursday, 8 October
Divider
Text
Above the line
Below the line
Repeat
Grid
Repeat
Japan trip
Saved
RM 6.8K of RM 8K
Emergency fund
Saved
RM 7.5K of RM 10K
New laptop
Saved
RM 1.2K of RM 4.5K
Strip
Repeat
Look
Plain
Look
RM 1.2K
Spent this month
Hero
Look
RM 1.2K
Spent this month
Hero with graphs · ink
Look
RM 1.2K
Total spend across all categories
Spend per week
By category
Breakdown by category
Hero with graphs · blue
Look
RM 1.2K
Total spend across all categories
Spend per week
By category
Breakdown by category
Hero with alert
Look
RM 1.2K
Spent this month
02 · Generative
Generative
Budget gauge
“Show this month's spending as a fuel gauge against my RM1,500 budget, with my latest expenses beside it.”
Savings jars
“Draw each savings goal as a jar filling up. Warn me about any goal due within a month that isn't close.”
Workout heatmap
“A calendar heatmap of my workouts over the last 12 weeks, with my current streak.”
Invoice timeline
“A timeline of this month's invoices by due date: paid, waiting, and overdue ones that pulse. Put what I'm still owed on top.”
Dose clock
“Show today's medicine doses on a 24-hour clock so I can see what's taken and what's next.”
Monthly receipt
“Print this month's spending like a shop receipt, with the total and what's left of my budget at the bottom.”