Budget Bar

Category row with spent over budget caption and a progress bar that colors emerald, amber, or rose as it fills.

Groceries$284 / $450

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Money9 } from "@/components/beste/piece/money9";

<Money9
  category="Groceries"
  spent="$284"
  budget="$450"
  progress={63}
/>

More Finance pieces

View all Finance
Top spending
Rent$1,800
Groceries$640
Transport$220
Leisure$410

Ranked categories, each with an amount and a bar sized to its share.

Vacation fund
$2,480of $5,000

Gradient piggy bank beside a saved-over-goal readout and a thin progress bar underneath.

Split bill$248.60
AKSBJD
4 ways$62.15 each

Split Bill

money10

Bill total header above an overlapping avatar stack with the per-person share on the right.

Stripe payout
IncomeToday · 09:14
+$3,240.00

Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.

AAPLApple Inc.
$218.42
+1.8%

Ticker row with symbol, company, price, a tiny sparkline, and a signed percentage delta.

MRR$48.2k
+12% MoM

Monthly recurring revenue with its growth and a tonal bar history.