Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA budget bar that splits spent, committed and remaining money, turns overspend into an explicit over-budget message and formats currency by locale.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when a team, project or campaign has a budget and approvals that are committed before they are paid.
Do not use it when you only have a spent total (use a plain progress bar).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Required | Description |
|---|---|---|---|
budget | number | required | - |
spent | number | required | - |
committed | number | required | Approved but not yet paid. |
currency | string | optional | - |
locale | string | optional | - |
title | string | optional | - |
The pattern ships with a Testing Library test (meter-group-budget-spend.test.tsx) that covers the remaining sentence, the over-budget sentence, the legend and locale formatting.