Plan name with its recurring price and the date of the next charge.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money17 } from "@/components/beste/piece/money17";
<Money17
plan="Pro plan"
amount="$24"
period="/mo"
nextLabel="Next charge"
nextDate="Jul 1, 2026"
/>Monthly recurring revenue with its growth and a tonal bar history.
Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.
Months of runway over a split of current balance and monthly burn.
Ranked categories, each with an amount and a bar sized to its share.
Two currency columns linked by an arrow, with a rate caption beneath.
Bill total header above an overlapping avatar stack with the per-person share on the right.