Budget alert settings: a budget, a threshold, channels, a hard stop and a live preview of the alert.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/spend-alertsPlayground
Spend alerts
Production · Model API usage in October
On track
Monthly budgetResets Nov 1, in 5 days
Alert at80% · $4,000
Spent $3,412.80Forecast $3,918 by Oct 3168% used
Notify
- Emailfinance@northwind.example
- Chat#eng-spend
- PagerPlatform on-call at 100%
Hard stop at 100%Keep serving past the budget
Chat preview#eng-spend
Northwind Billing App 9:41 AM
Production passed 80% of budget
- Used
- $4,000 of $5,000
- Forecast
- $3,918 by Oct 31
Saved
Spend alerts
Production · Model API usage in October
Saved
Monthly budgetResets Nov 1, in 5 days
Alert at80% · $4,000
Spent $3,412.80Forecast $3,918 by Oct 3168% used
Notify
- Emailfinance@northwind.example
- Chat#eng-spend
- PagerPlatform on-call at 100%
Hard stop at 100%Keep serving past the budget
Chat preview#eng-spend
Northwind Billing App 9:41 AM
Production passed 80% of budget
- Used
- $4,000 of $5,000
- Forecast
- $3,918 by Oct 31
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/spend-alerts
Accessibility
- Every Switch names its channel.
- The threshold is a plain range input, and its value reads as a percent and an amount.
- Saved shows in the header and on the Button.
Motion
- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.
Responsive behavior
- 560 wide on Web and 358 on Mobile.
- Touch targets stay at 44 on Mobile.
Performance
- The threshold is a native range input, so dragging needs no pointer tracking.
- The Saved flash is one 2.4 s timer, cleared on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import SpendAlerts from @/components/fetaui/spend-alerts. It composes Input, Switch and Button with Panel, Body, Meter and Tag from data-kit.
- onSave receives budget, threshold, channels and hardStop. defaultChannels and defaultHardStop seed the switches.
- The threshold moves in steps of 5 and stops at 50. defaultSaved shows Saved until the first edit. The header otherwise reads Over budget, Forecast over budget or On track from spent, forecast and the budget.
- preview sets the chat preview's sender, time and subject, which default to Northwind Billing, 9:41 AM and Production. Send test only calls onTest.
Related
Usage OverviewProBlockSpend against budget with a projection, the plan, and metered usage with warning and danger states.Usage MeterComponentA metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.SwitchComponentTurns a setting on or off and applies it at once.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.