---
name: "@onchain-ui"
slug: "onchain-ui"
description: "Web3 components for shadcn apps. Wallet identity, token logos, balances, and market UI primitives for EVM products."
category: "Auth/identity"
tags: ["auth", "buttons", "cards", "crypto", "design-system", "forms", "hooks", "icons"]
framework: "react"
license: "MIT"
author: "GavinJaynes"
website: "https://onchain-ui.dev"
github: "https://github.com/GavinJaynes/onchain-ui"
registry: "https://onchain-ui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 16
generated_at: "2026-09-05T09:50:59.044Z"
---

# @onchain-ui

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

## Links

- Website: https://onchain-ui.dev
- GitHub: https://github.com/GavinJaynes/onchain-ui
- Registry JSON: https://onchain-ui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/onchain-ui
- This file: https://sh4dcn.vercel.app/md/onchain-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://onchain-ui.dev/r/registry.json
pnpm dlx shadcn@latest add https://onchain-ui.dev/r/registry.json
bunx shadcn@latest add https://onchain-ui.dev/r/registry.json
# clone the source repo
git clone https://github.com/GavinJaynes/onchain-ui.git
# fetch the raw registry index
curl -s https://onchain-ui.dev/r/registry.json
```

## Components (16)

| name | type | description | install |
| --- | --- | --- | --- |
| address-display | registry: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 | registry: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` |
| asset-row | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:ui | Displays overlapping token logos for baskets, pools, routes, and portfolio rows. | `npx shadcn@latest add https://onchain-ui.dev/r/token-stack.json` |
| use-available-connectors | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @onchain-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/onchain-ui.md) for the component list.
2. Fetch the machine-readable index: https://onchain-ui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: onchain-ui).
```