Portfolio split shown as a single tonal bar with a matching percentage legend.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money13 } from "@/components/beste/piece/money13";
<Money13
title="Allocation"
slices={[
{
"label": "Equities",
"pct": 52
},
{
"label": "Bonds",
"pct": 24
},
{
"label": "Cash",
"pct": 14
},
{
"label": "Crypto",
"pct": 10
}
]}
/>Ranked categories, each with an amount and a bar sized to its share.
Bill total header above an overlapping avatar stack with the per-person share on the right.
Ticker row with symbol, company, price, a tiny sparkline, and a signed percentage delta.
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.
Category row with spent over budget caption and a progress bar that colors emerald, amber, or rose as it fills.