shadcn.io is not affiliated with official shadcn/ui
Staking Dashboard Web3 Block for Svelte
A staking page with the position, an example rate, pending rewards and a Claim button, a Stake or Unstake form with Max, the lots with their lock-up bars, and an Unlocking queue whose Withdraw waits for its date.
Installation
Overview
Show staked funds, the lock-ups and the unbonding queue on one screen, with this staking dashboard for Svelte with Ark UI. It's the staking page of Stakehearth, a fictional staking dashboard, and every figure is a typed sample. The top band holds the staked total, an example rate of 3.8 percent a year (labelled as an example, not a promise of returns) and the pending rewards with an outline Claim button. A form in the end cell switches between Stake and Unstake with a Segment Group, takes an amount with a Max button and holds the page's one primary. Under the position, the lots list each amount with the day it was staked, the day it unlocks and a Progress bar of the time between; only lots whose lock-up has ended can be unstaked. Unstaking opens an entry in the Unlocking band with a date 7 days on, and its Withdraw button is refused until that date has passed. For staking apps, wallets and validator front ends.
FAQ
Why can I only unstake part of my stake?
Each lot has a lock-up. On the demo's fixed date (18 Oct 2026) only the lots whose unlock day has passed count, and Max fills in exactly that amount. Asking for more shows a problem under the field that says how much is out of its lock-up. Unstaking takes from the earliest unlocked lot first.
What does the Unlocking queue do?
Unstaking moves the amount into an entry that can be withdrawn 7 days after the fixed date. Withdraw is a button that stays reachable but refuses with the date in the status line until then; one typed entry is already past its date, so you can see both states. Withdrawing adds the amount to the sample wallet and marks the entry as done without removing the row.
Is the 3.8 percent rate a forecast?
No. It is a typed example, labelled as such next to the figure, and the pending rewards do not grow while you look. Real rates change with the network, and staked funds can lose value if a validator is penalised, which the form says in plain words.
What stays local, and how do I wire it?
Everything. Nothing reads a wallet or a chain: the lots, the queue, the wallet balance and the rewards are state in the tab, and the dates are counted from one fixed constant. In your app read positions and unbonding entries from your staking contract or indexer, send stake and unstake as wallet transactions, and replace the fixed date with the chain's time.
Is it accessible from the keyboard?
Yes. The action switch is a radio-style Segment Group, the amount is a labelled field with its hint and problem tied to it, the lots and the queue are named scroll regions, and every Claim and Withdraw button has a name that includes its amount. One polite status message says what each action did.