Ranked categories, each with an amount and a bar sized to its share.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money19 } from "@/components/beste/piece/money19";
<Money19
title="Top spending"
categories={[
{
"label": "Rent",
"amount": "$1,800",
"pct": 100
},
{
"label": "Groceries",
"amount": "$640",
"pct": 36
},
{
"label": "Transport",
"amount": "$220",
"pct": 12
},
{
"label": "Leisure",
"amount": "$410",
"pct": 23
}
]}
/>Category row with spent over budget caption and a progress bar that colors emerald, amber, or rose as it fills.
Bill total header above an overlapping avatar stack with the per-person share on the right.
Portfolio split shown as a single tonal bar with a matching percentage legend.
Months of runway over a split of current balance and monthly burn.
Headline total with a percentage change and the period it covers.
Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.