Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

New Listings Web3 Block for Solid

A listings desk for six sample tokens: switch the baseline between listing price and first-day close, filter by age, and open a row for a seven-point sparkline with day one marked.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a new listing's first-day pop and what happened next, with this new listings panel for Solid with Ark UI. It's the listings desk of Newcast, six invented tokens listed over the last month, and every price is a typed sample, not market data. A Segment Group switches the baseline between the listing price and the first-day close, so the same rows read as the pop or as the follow-through, and a Native Select limits the rows to Today, This week or This month by age in days from a fixed date. Each row shows the token, the day it listed and how many days ago, the baseline price, the price now, the market cap and a signed change. A row opens in a Collapsible with a seven-point sparkline, day one marked with a filled dot and now with an open one, and the listing price, first-day close, day-one move and move since day one. For listing calendars, exchange desks and launch trackers.

FAQ

What does the baseline change?

It changes the starting price the change column is measured from. From the listing price, the change is the price now against the price at listing; from the first-day close, it is the price now against the close of day one, so a token that popped and faded can read up on one baseline and down on the other. The opened row always shows both.

How is a listing's age worked out?

From the listing date and a fixed AS_OF date, by whole days in UTC; nothing reads the clock. Today is empty on purpose, so the empty state is reachable, and the list region keeps its height whatever the window.

What does the sparkline draw?

Seven closes sampled evenly from the first day to AS_OF, typed per token. The first point is day one and the last is the price now. The line is a single SVG path scaled to the row's own range, so compare shapes, not heights, between tokens.

What stays local, and how do I wire it?

All of it. Tokens, dates, prices and caps are typed constants and the open row is local state. In your app load recent listings from your market data source, store the first-day close at the end of day one, and keep the sample label until prices are real.

Is it accessible from the keyboard?

Yes. Each row is one button that opens its detail, the segments are a radio-style group, the select is native, and the list is a named scroll region. Values in a row carry hidden labels so a screen reader hears "Price now" before the number.

How does it look on a phone?

A row folds to the token, the price now and the change under it; the listed date, baseline price and market cap move into the opened detail. The two controls stack at full width.

All 100 web3 blocks