shadcn.io is not affiliated with official shadcn/ui
Watchlist Web3 Block for Ark UI
A token watch list you reorder: add from 14 sample tokens with an Autocomplete, move rows up and down, sort by 24 h or market cap, and remove one with Undo.
Installation
Overview
Keep the few tokens you follow in the order you want, with this watchlist panel for React with Ark UI. It's the watch list of Perchwatch, and every figure is a typed sample on invented tokens, not market data. An Autocomplete adds a token from a universe of 14, marking those already on the list. Each row shows a two-letter tile, the name and ticker, the price, a signed 24 h move, a seven-point sparkline and the market cap. Move up and Move down icon buttons keep the order you chose and are the keyboard way to reorder; Remove says "Removed Plover." in the status line with one level of Undo. A Segment Group sorts by 24 h or market cap without losing your order, and Custom order brings it back. An empty list shows an empty state that points back to the search field. For portfolio apps, exchanges and any list a person curates.
FAQ
Where is the order kept?
In component state: a list of ids in the order you set. Sorting by 24 h or market cap only changes what is shown, never that list, and while a sort is on the move buttons answer "Switch to Custom order to move rows" instead of moving anything.
How does Undo work?
Removing a token stores the list as it was and names the token in the status line. Undo restores that list in one step, and any other change clears it, so Undo is always one level and always about the last removal. Focus moves to a neighbouring row's Remove button, or to the search field when the list is empty.
Can I reorder without a mouse?
Yes. The arrow buttons are the way: each has a name such as "Move Plover up", stays in the tab order at the ends with an explanation instead of disappearing, and keeps focus on the same direction after a move so you can press it again.
What stays local, and how do I wire it?
All of it, including the list. Nothing is saved or fetched. In your app save the id list per user, load prices and closes for those ids from your market data source, and keep the sample label until the figures are real.