Introduction

What is onchain-ui?

onchain-ui is an open source shadcn registry of web3 UI components. The components use viem for EVM addresses and identity resolution, wagmi for wallet connections, and Tailwind CSS for styles.

Install a component to add its source code to your app:

npx shadcn add @onchain-ui/address-display

How the components work

Edit the installed files to change styles or behavior. Components use shadcn buttons, menus, and tooltips, so they share your app's theme.

Pass balances, prices, and token metadata as props. AddressIdentity can resolve ENS names and Basenames, and ConnectWallet handles connections through wagmi. See Configuration to set your EVM chains and RPC endpoints.

Getting started

onchain-ui is listed in the shadcn registry directory, so the @onchain-ui namespace works with no setup. Install the shadcn CLI if you haven't already, then add any component:

npx shadcn add @onchain-ui/address-display

npx shadcn add @onchain-ui/token-logo

npx shadcn add @onchain-ui/asset-row