Components/Portfolio Card
Portfolio Card
Single-position card. Market value, sparkline, day-change chip, and the full breakdown (shares, avg cost, last price, total return). Becomes a focusable button when onClick is passed.
Installation
npx ajaxui add portfolio-cardGrid layout
Cards have no fixed width - drop them into a grid and they fill the cell.
Crypto positions
Works for any asset - pass fractional shares for crypto holdings.
BTC
Bitcoin
Market value
$17,677.13
- Shares
- 0.2481
- Avg cost
- $42,000.00
- Last
- $71,250.00
- Total return
- +$7,256.93 (+69.64%)
ETH
Ethereum
Market value
$12,243.60
- Shares
- 3.42
- Avg cost
- $2,200.00
- Last
- $3,580.00
- Total return
- +$4,719.60 (+62.73%)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| symbol | string | - | Ticker. Used in fallback icon (first 2 chars). |
| name | string | - | Full name (e.g. "Apple Inc."). |
| shares | number | - | Held quantity. Fractional ok for crypto. |
| avgCost | number | - | Average cost basis per share. |
| currentPrice | number | - | Last trade price. |
| currency | string | "USD" | ISO 4217 currency code. |
| locale | string | "en-US" | Locale for Intl formatting. |
| series | number[] | - | Recent prices for sparkline. |
| dayChangePct | number | - | Day-change chip. Sign drives color. |
| icon | ReactNode | - | Override the symbol-letter avatar. |
| onClick | () => void | - | Makes the card a focusable button. |