@onchain-ui

Web3 components for shadcn apps. Wallet identity, token logos, balances, and market UI primitives for EVM products.

18 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://onchain-ui.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://onchain-ui.dev/r/registry.json

bun bunx shadcn@latest add https://onchain-ui.dev/r/registry.json

fetch registry curl -s https://onchain-ui.dev/r/registry.json

Components

18 total

Address Display ui

Displays an EVM wallet address with copy-to-clipboard and an optional block explorer link.

npx shadcn@latest add https://onchain-ui.dev/r/address-display.json

Address Identity ui

Resolves an EVM address to an ENS or Base name with optional avatar, copy-to-clipboard, and explorer link.

npx shadcn@latest add https://onchain-ui.dev/r/address-identity.json

Amount Input ui

Controlled decimal string input for token amounts. Preserves precision and incomplete edits, with an optional fractional digit limit.

npx shadcn@latest add https://onchain-ui.dev/r/amount-input.json

Asset Input ui

Labeled amount field for swaps, sells, and deposits, with slots for token selection, supporting text, balances, and actions. No wallet provider required.

npx shadcn@latest add https://onchain-ui.dev/r/asset-input.json

Asset Row ui

Displays a practical portfolio or watchlist row from token identity, network, amount, value, and change.

npx shadcn@latest add https://onchain-ui.dev/r/asset-row.json

Chain Select ui

Network selector for wallet switching or filtering, with optional all-networks and unsupported-chain states.

npx shadcn@latest add https://onchain-ui.dev/r/chain-select.json

Connect Wallet block

A complete connect, identity, and disconnect surface wired to wagmi.

npx shadcn@latest add https://onchain-ui.dev/r/connect-wallet.json

Connector List ui

A wallet picker list with icons, pending state, and a no-wallet-detected fallback.

npx shadcn@latest add https://onchain-ui.dev/r/connector-list.json

Crypto Icons lib

Swappable adapter that resolves token and network icons for onchain-ui components.

npx shadcn@latest add https://onchain-ui.dev/r/crypto-icons.json

Network Logo ui

Displays a network or chain logo with known chain fallbacks.

npx shadcn@latest add https://onchain-ui.dev/r/network-logo.json

Onchain Config lib

One file for app-wide chain settings: explorers, network names, read clients, and avatar gateways.

npx shadcn@latest add https://onchain-ui.dev/r/onchain-config.json

Sonner ui

Toast notifications themed by your app's CSS tokens. A framework-agnostic Toaster with no next-themes dependency.

npx shadcn@latest add https://onchain-ui.dev/r/sonner.json

Token Balance ui

Displays a token amount with optional logo, fiat value, and change.

npx shadcn@latest add https://onchain-ui.dev/r/token-balance.json

Token Logo ui

Displays a token image with resilient symbol, name, or address fallback.

npx shadcn@latest add https://onchain-ui.dev/r/token-logo.json

Token Price ui

Formats token prices with optional positive, negative, or neutral change.

npx shadcn@latest add https://onchain-ui.dev/r/token-price.json

Token Stack ui

Displays overlapping token logos for baskets, pools, routes, and portfolio rows.

npx shadcn@latest add https://onchain-ui.dev/r/token-stack.json

useAvailableConnectors hook

Filters unavailable injected wallets while preserving mobile and remote wagmi connectors.

npx shadcn@latest add https://onchain-ui.dev/r/use-available-connectors.json

Wallet Button ui

The connected-wallet pill: resolved identity, network mark, and a disclosure chevron.

npx shadcn@latest add https://onchain-ui.dev/r/wallet-button.json