onchain-ui

Overview

onchain-ui is an open-source shadcn registry of web3 UI components for teams shipping onchain products on EVM chains. Built with wagmi and viem, it provides asset inputs, wallet identity, token logos, chain context and market UI primitives that install as source rather than through a locked component SDK.

The registry, at version 0.2.0, contains 18 items: UI primitives, a config library, a connector hook and a wallet button block. Its example app uses the same source-installed components to build a working multichain swap interface with amount inputs, asset discovery, chain selection, live pricing and route details.

Features

• Wallet connection: Connect wallet, connector list, wallet button and a useAvailableConnectors hook.
• Address identity: AddressDisplay with ENS-safe formatting and AddressIdentity combining avatar, name, label and address.
• Asset inputs: Amount input and asset input for swap and transfer flows, plus asset rows.
• Token visuals: Token logos, network logos, crypto icons and overlapping token stacks for baskets and pools.
• Market data: Token price and token balance components.
• Chain context: A chain select and shared onchain config.
• Example app: A multichain swap UI composed from the registry components.

Tech stack

• React, wagmi 3, viem 2, shadcn/ui, lucide-react, Sonner

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @onchain-ui/component-name