Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Trending Tokens Web3 Block for Svelte

A trending rank you can reweight: three sliders for mentions, volume spike and momentum re-rank twelve sample tokens, and each row shows its move against the default weights, its score and its three signals as tiny bars.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show why a token is trending, and let people change what counts, with this trending tokens panel for Svelte with Ark UI. It's the discovery page of Risemark, and every signal is a typed sample on invented tokens, not a recommendation. Twelve tokens each have three signals from 0 to 100, and three Sliders, Mentions, Volume spike and Momentum, set the weights. The weights are read as shares that add to 100, so the labels always sum correctly, and the composite is the weighted average. The ranked table shows each token's rank, how far it moved against the default 40, 30 and 30 weights (Up 2, Down 1 or Same, with an arrow), its score, and three tiny bars of its signals in three foreground weights, hidden on a phone, with the numbers in text for assistive technology. Reset puts the defaults back. For discovery pages, research tools and any ranking where the formula should be visible.

FAQ

How are the weights turned into a rank?

Each slider holds a raw weight from 0 to 100 in steps of 5. A helper turns the three into shares that add to exactly 100 using the largest remainder method, the score is the sum of each signal times its share, and tokens sort by score with the typed order as the tie-break. If all three sliders are at 0 the three signals count equally, and the labels say so.

What does Against defaults mean?

The table remembers the order the default weights give, computed once from the same helper, and shows how many places each token has moved from it. The first load always reads Same for every row, which is the check that the helper agrees with itself.

Where do the signals come from?

They are typed numbers in LINES. In your app compute them from your own data, such as mention counts against a trailing average, volume against a baseline and price momentum over a window, scale each to 0 to 100, and keep the criteria in the interface. This panel states that its signals are samples and is not a recommendation.

What stays local, and how do I wire it?

Everything. No request is made, nothing is stored, and the tokens are invented. To wire it, load the signals per token from your backend, keep the weights in your user's settings if you want them remembered, and recompute the rank on the client as here.

Is it accessible from the keyboard?

Yes. Each slider has a name, arrow keys move it by 5, and a separate polite message after you stop moving it says the weights and who is first. The table has a caption, column heads and row heads, and Reset is a button that answers when there is nothing to reset.

How does it look on a phone?

The three sliders stack, the signal bars column is hidden and the rest of the table keeps rank, token, change and score. The numbers behind the bars stay in the table's screen reader text.