Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Block Explorer Web3 Block for Radix UI

A block explorer on a sample chain: search a block number, a transaction hash or an address, browse the latest ten blocks with gas used against the limit, and open a transaction or an address in place.

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

Overview

Look up a block, a transaction or an address and follow the links between them, with this block explorer panel for React with Radix UI. It's Blockwalk, a sample explorer on a fictional chain, so the blocks, hashes and balances are typed samples and nothing is fetched. A search field takes a block number, a transaction hash or an address (the first six characters of a hash or address are enough) with one example button of each kind under it, and anything it doesn't hold shows an Empty state reading Not in this demo. By default a list of the latest ten blocks, each with its time, transaction count, a gas meter against the limit and the miner, sits beside the chosen block's details and transactions. Opening a transaction shows its status, hash with a Copy Button, sender, receiver, value, fee and block; an address shows its balance and recent activity. For chain tools, wallet apps and developer docs.

FAQ

Why does a block say 142 transactions and list four?

The sample holds only the first few transactions of each block, and the list says so with a count such as 4 of 142. The block's gas used, transaction total and miner are typed separately, so the numbers stay consistent without a thousand rows.

What stays local, and how do I wire it?

Everything. No request is made and the hashes are generated sample values. In your app search your node or indexer by block number, hash or address, load the latest blocks over a subscription or a poll, and keep the details view driven by the same route, so a transaction has its own address.

What does the copy button do?

It copies the full transaction hash through the clipboard and confirms to screen readers that it did, or that the clipboard refused. Nothing else is copied.

Is it keyboard friendly?

Yes. The search is a form, so Enter runs it. The block list and the transaction rows are buttons, the details are a named scroll region you can focus, and the current block is marked in text as well as shade.

How does it look on a phone?

The block list becomes a select above the details, the search keeps its example buttons, and the details scroll in their own region so the panel keeps its height.