A portfolio screen with a scrolling price ticker, total balance with a sparkline, an allocation donut, a candlestick chart with volume and range tabs, recent activity and a sortable holdings table. Selecting an asset charts it.
Main wallet · 6 assets · synced 12s ago
Share of portfolio value
Halcyon / USD · 4h candles
Trades, transfers and rewards
Select an asset to chart it
| Asset | ||
|---|---|---|
| 2.84% | $88,803.83 | |
| 1.37% | $70,134.50 | |
| 6.12% | $44,333.19 | |
| 11.40% | $19,838.00 | |
| 4.71% | $10,800.00 | |
| 0.02% | $8,423.37 |
npx shadcn@latest add https://hyperblur.dev/r/dashboard-crypto.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-crypto.tsx.
import { DashboardCrypto } from "@/components/hyperblur/dashboard-crypto"
<DashboardCrypto currency="$" defaultRange="7D" onAssetChange={(symbol) => console.log(symbol)} />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#f5b544" | Accent color for the active rail item, the Deposit button, the balance sparkline, the last price line and focus rings. |
| brand | string | "Vaultline" | Product name used for the rail logo label. |
| user | string | "Kenji Watanabe" | Name used for the avatar initials in the rail. |
| currency | string | "$" | Currency symbol used in every price and amount. |
| holdings | CryptoHolding[] | 6 sample assets | Assets with symbol, name, amount, price, 24h change in percent and color. Drives the ticker, donut, chart and table. |
| range | "24H" | "7D" | "30D" | "1Y" | Controlled chart range. Pair with onRangeChange. | |
| defaultRange | "24H" | "7D" | "30D" | "1Y" | "7D" | Initial chart range when uncontrolled. |
| onRangeChange | (range: CryptoRange) => void | Called when a range tab is picked. | |
| asset | string | Controlled symbol shown in the candlestick chart. Pair with onAssetChange. | |
| defaultAsset | string | first holding | Initial charted symbol when uncontrolled. |
| onAssetChange | (symbol: string) => void | Called when an asset is picked from the donut legend or the holdings table. |