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}
/>