shadcn.io is not affiliated with official shadcn/ui
Multisig Wallet Web3 Block for Radix UI
A design studio's shared wallet: four pending transactions in nonce order with a signer strip and an Approve or Revoke button per signer, an Execute button that respects the nonce, and the wallet's balance in a side cell.
Installation
Overview
Run a wallet that needs more than one signature, with this multisig panel for React with Radix UI. It's the shared wallet of Vaultlane, a design studio: a header sentence says how many of the three signers must approve and how many transactions wait, and a Native Select in the header sets who is acting, Imani, Dov or Liesl. A hairline frame with a plus mark on each corner holds the waiting transactions as rows in nonce order: the nonce in a tile, who and how much, a strip of three signer cells with a check where someone approved, the approvals in words, and an outline Approve or Revoke approval button for the acting signer. At two approvals a row is ready, but a later nonce can't run before an earlier one, so the row says which nonce goes first. The foot's Shine Button always names the next one it can run, for example Execute nonce 14. Executing moves the row to the Done band and lowers the balance in the side cell, which also lists the threshold, the next nonce and the signers. For treasuries, studios and any team wallet.
FAQ
Why can't a later transaction run first?
Every transaction from a wallet has a nonce, a counter the chain checks in order, so nonce 15 can't be executed before nonce 14. The rows show that in words: a ready transaction behind an unfinished one says Ready, nonce 14 first, and the foot's button keeps naming the lowest one that is ready, or the lowest waiting if none is, and answers with the reason when it can't run.
What does Act as do?
It chooses which signer your Approve and Revoke approval presses count as, so one visitor can walk the whole flow. Each row's button says in its name who it acts as and what it does. A signer who has already approved sees Revoke approval instead, and revoking a ready transaction turns it back to waiting.
What stays local, and how do I wire it to a wallet?
All of it. Nothing is signed, sent or read from a chain: the queue (TXS), who has approved and the balance are typed or kept in local state, and each action says Recorded in this demo. In your app load the pending transactions and their confirmations from your multisig's API, send each approval as a signature from the connected signer, and execute through the contract once the confirmations reach the threshold.
What is the Add signer transaction?
A change to the wallet's own rules, queued and approved like a transfer: it moves no funds, so its amount reads No transfer and executing it only clears the row. It follows the same nonce order as the rest.
Is it accessible from the keyboard?
Yes. The rows are a list, each signer strip is a named list that says who approved, and the buttons name their transaction and signer. Status is never a color alone: a check, the signer's name for screen readers and words such as 1 of 2 approvals say it. One polite status message reports each action.