onchain-ui

License: MIT
[blocked]

Copy-paste web3 UI components for shadcn apps.

onchain-ui is an open source for product teams building onchain interfaces: wallet identity, token displays, chain context, balances, market values, and portfolio rows. Components install into your app as source code — inspect them, restyle them, and wire them into your own data layer.

Docs, live examples, and recipes:

Install

Add any component with the shadcn CLI:

bash
npx shadcn add https://onchain-ui.dev/r/asset-row.json# or: pnpm dlx shadcn add … / bunx shadcn add …

Or configure the registry namespace once in your components.json:

json
{  "registries": {    "@onchain-ui": "https://onchain-ui.dev/r/{name}.json"  }}
bash
npx shadcn add @onchain-ui/asset-row

Components

ComponentDescription
Truncated address with copy and block explorer link
Live ENS / Basename resolution with avatar
Token image with resilient fallbacks
Overlapping logos for pools, baskets, and routes
Price formatting with change and trend color
Chain logo with known-chain fallbacks
Amount with optional logo, fiat value, and change
Composed portfolio / watchlist row
Swappable token/network icon adapter

See for composed surfaces (portfolio card, wallet header, pool positions) and for wiring components to wagmi, TanStack Query, and TanStack Table.

Use with AI assistants

The registry is MCP-compatible — its index is served at , so assistants like Claude Code and Cursor can browse and install components through the . Items can also be opened directly in v0 from each docs page.

Why

Most crypto apps rebuild the same UI pieces: truncated addresses, ENS/Base name display, token icons, network badges, token amounts, price changes, and portfolio rows.

onchain-ui packages those patterns as shadcn registry items so the code lands inside your app — no wrapper library, no lock-in. Components are EVM-first and built on the same viem primitives as wagmi.

Status

Early and actively developed. The focus is a small, useful registry of composable primitives rather than a broad component library. Registry URLs (/r/{name}.json) are stable; component APIs may still evolve between minor versions while the project is pre-1.0.

Local Development

bash
npm install     # install dependenciesnpm run dev     # docs site at http://localhost:3000npm run test    # registry contract testsnpm run build   # registry + site build

Project Structure

txt
app/  (site)/            Home page  (docs)/            Documentation pages  r/[name]/route.ts  Registry endpoints (/r/registry.json, /r/<name>.json)components/  demos/             Live examples used in docs  ui/                Local docs UI helperscontent/docs/        MDX documentation (components, examples, recipes, standards)lib/onchain/         Shared onchain utilitiesregistry/  meta/              Registry item metadata (source of truth)  onchain-ui/        Source components distributed by the registryscripts/  build-registry.mjs Generates registry.json and registry/generated/

registry.json and registry/generated/ are build artifacts — edit registry/meta/ and the source components, then run npm run registry:build.

Contributing

Issues and pull requests are welcome. The best contributions are small, practical components that solve repeated onchain product UI needs while staying easy to copy, inspect, and customize.

Author

Created and maintained by .