Ticker row with symbol, company, price, a tiny sparkline, and a signed percentage delta.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money6 } from "@/components/beste/piece/money6";
<Money6
symbol="AAPL"
name="Apple Inc."
price="$218.42"
delta={1.8}
data={[
12,
18,
14,
22,
20,
28,
24,
32,
30,
38,
36,
44
]}
/>Round symbol tile, asset name and price, plus a signed 24h delta with trend arrow.
Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.
Two currency columns linked by an arrow, with a rate caption beneath.
Ranked categories, each with an amount and a bar sized to its share.
Portfolio split shown as a single tonal bar with a matching percentage legend.
Category row with spent over budget caption and a progress bar that colors emerald, amber, or rose as it fills.