shadcn.io is not affiliated with official shadcn/ui
Crypto Portfolio Table Block for Radix UI
A portfolio table of six invented assets with a stacked allocation bar keyed to the rows, gain as a sign, an arrow and a word, and a Hide balances switch that masks amounts to bullets while shares and percentages stay.
Installation
Overview
Check a portfolio in public without showing the balance, with this crypto portfolio table for React with Radix UI. Six assets with invented tickers (OAK, MIRA, PLUM, RILL, DUNE and EMBR) sit in a native table with their price, holding, value and gain since purchase. A strip over it gives the total value, the gain and the largest holding, and a stacked allocation bar shows each asset's share of the value in foreground weights, keyed to the rows by a small swatch and to a legend under the bar. The Switch in the header is privacy mode: it hides balances, so holdings, values and the total turn into bullets in a slot of the same width and read "Hidden" to a screen reader, while the shares and the gain percentages stay. Gains are an arrow, a sign and a word, never green and red. Every price, holding and cost is sample data for the demo, never market data, and the block says so. It's built from Switch and Guides, with a CSS entrance only. For wallets, portfolio trackers, and any screen that may be looked at over a shoulder.
FAQ
Are these real prices?
No. The assets are invented and every price, holding and cost is typed in the file as sample data. The header sentence and the status line both say so. Nothing is fetched from an exchange or a wallet.
What does Hide balances hide?
The holding in each row, each row's value and the total value. They become bullets inside a slot of the same width, so the columns and the heights do not move, and a screen reader hears "Hidden". The allocation shares, the legend, the gain percentages and the largest holding's share stay visible, because they do not reveal an amount.
How is the allocation bar built?
Each asset's value over the total, as a whole-percent share rounded by largest remainder so the shares always add to 100. The bar is a grid whose columns follow those shares, in six foreground weights from heavy to light, and the same weight appears as a swatch beside the asset's name and in the legend.
How are gain and loss shown?
As a sign, an arrow and a word: "+22.4%" with an up arrow and "Up", or "−9.1%" with a down arrow and "Down". The percentage is the price against what a unit cost when it was bought. There is no green and red.
What changes on a phone?
The Price and Holding columns fold into the asset's cell, which keeps the ticker and the holding on a line under the name; the value and the gain stay as columns. The privacy switch stays in the header.
What stays local, and how do I wire it for real?
Everything: the six assets are typed in ASSETS, and the switch only changes this page. To wire it up, replace ASSETS with your own holdings and prices (from your wallet's or exchange's API), keep the helpers that derive values, shares and gains, and remember the switch hides numbers on screen only, it does not protect them in the page's data.