Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

DeFi Dashboard Web3 Block for Ark UI

A positions overview with a concentration cap: nine lending, staking and liquidity positions across five protocols, a slider that marks protocols over the cap, and a line that says how much to move.

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

Spot concentration before it hurts with this DeFi positions overview for React with Ark UI. It's Positionhouse, and every size is a typed sample, not market data. Nine positions, each named with a word for its type (lending, staking or liquidity), sit under five invented protocols that together hold 38,200 USD. A Slider named No protocol above sets a cap from 10 to 60 percent; each protocol row draws its share as a bar with a tick at the cap, says Over cap in words when it passes it, and the line under the slider says how much to move, for example Move about 2,130 USD out of Alderfall Lend. Every protocol is a Collapsible row that opens in place to its positions. For portfolio apps and dashboards that watch how much sits in one place.

FAQ

How is a protocol judged over the cap?

Its share is its value over the whole portfolio, compared to the cap without rounding, so a protocol at 35.4 percent is over a 35 percent cap and shows 35.4%. The amount to move is the value above the cap, rounded to the nearest ten dollars. When the cap is below 20 percent, no split of five protocols can meet it, and the line says so instead of inventing a move.

What do the bars show?

Each bar runs from 0 to 60 percent of the portfolio, the largest cap the slider allows, so bars keep their meaning while you drag. The tick marks the cap, and a bar past it is solid foreground while the others are a lighter tone.

What stays local, and how do I wire it?

All of it. Nothing reads a wallet and nothing is moved: positions are typed constants and the cap is local state. In your app load positions from each protocol's contracts or an indexer, price them from your source, and keep the cap in the user's settings. A real rebalance is a set of transactions the user signs.

Is it accessible from the keyboard?

Yes. The slider takes the arrow keys, Home and End; its result is spoken once you stop moving it. Each protocol row is a button that says whether it is open, and the nested positions are plain lists with their value and share as text.

How does it look on a phone?

The slider and its sentence take the full width, each protocol keeps its name, value and share on one line with the bar under it, and the positions open below the row.

All 100 web3 blocks