shadcn.io is not affiliated with official shadcn/ui
Market Overview Web3 Block for Solid
A market summary with a 24 h or 7 d switch: breadth bar for 30 sample tokens, a sentiment index with its word, a dominance bar, and the five biggest gainers and losers re-ranked for the chosen window.
Installation
Overview
Read a whole market at a glance, with this market overview panel for Solid with Ark UI. It's the summary page of Breadthly, and every figure is a typed sample on invented tokens, not market data. A Segment Group at the header's end picks 24 h or 7 d, and the whole panel re-reads: the breadth cell counts how many of the 30 tokens rose and fell and draws them as a two-part bar, the sentiment cell places a marker on a 0 to 100 scale and names the band (Fear under 40, Greed over 60), and the dominance cell shows two named assets against everything else by market cap, with whole percentages that add to 100. Under them two lists share a hairline: the five biggest gainers and the five biggest losers of the window, each row a two-letter tile, ticker, name, price and a signed move written as a sign, an arrow and a word. For market home pages, news sites and portfolio apps that open on a summary.
FAQ
How are breadth and the movers worked out?
Each token carries a typed 24 h and 7 d return in LINES. Breadth counts the tokens above zero for the chosen window, the lists sort the same returns high to low and low to high, and the header sentence, the status line and the bar all use those same counts, so they never disagree. Nothing is typed twice.
Where does the sentiment index come from?
It is a typed sample per window, 64 for 24 h and 36 for 7 d, and a small helper turns it into Fear, Neutral or Greed with the cut-offs printed under the scale. In your app compute it from your own inputs, such as breadth, volatility and volume, and keep the cut-offs visible so the word is explainable.
Why does dominance not change with the window?
Market cap is a snapshot, not a return over a period, so the third cell says it does not change with the window. The two named assets, Ether and Wrapped Bitcoin, are typed; the rest of the cap is everything else. Percentages use the largest remainder method so they always add to exactly 100.
What stays local, and how do I wire it?
All of it. There is no price feed, no clock and no request: tokens, returns, caps and the index are typed constants, and the time shown is a fixed sample instant. In your app load tickers and returns from your market data provider for each window, store the user's last window, and keep the sample label until the data is real.
Why are gains and losses not coloured?
State is written as a sign, an arrow and a word for screen readers, with the bars in foreground weights, so the panel reads in every theme and for readers who can't tell hues apart. Up and down arrows keep their direction in right-to-left pages, and prices and moves are set left to right.