Skip to content
Twentyfirst UIPro

Budget List

Life · BudgetList, Panel

View as Markdown

Spending per category against its limit: spent and limit, a bar, and what is left or over in words.

  • The bar turns butter from 85 % and blush when over; "€42 over" says it in words too.
  • onSelect(id) makes each category a button (to show its transactions).

November budgets

17 days left

Props

BudgetList

PropTypeNotes
categoriesBudgetCategory[]Required
currency?string
onSelect?(id: string) => voidA category was picked (to show its transactions).
label?stringAccessible name (default "Budgets").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
side?boolean
title?string
subtitle?string
action?ReactNode
children?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.