Two currency columns linked by an arrow, with a rate caption beneath.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money2 } from "@/components/beste/piece/money2";
<Money2
fromCurrency="USD"
fromAmount="1.00"
toCurrency="EUR"
toAmount="0.92"
rate="1 USD = 0.92 EUR"
/>Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.
Oversized rate with its unit and a short note on how it compounds.
Ticker row with symbol, company, price, a tiny sparkline, and a signed percentage delta.
Round symbol tile, asset name and price, plus a signed 24h delta with trend arrow.
Score figure with a marker placed along its range and a rating word.
Ranked categories, each with an amount and a bar sized to its share.