Builder 4 min read· intermediate

OnchainKit

React components from Coinbase — connect wallets, show identities, transact in 1 line.

Stack

React + TypeScript

Maintained by

Coinbase

What it is

OnchainKit is a set of polished React components that wrap the common onchain UX patterns: connect wallet, show name + avatar, send a transaction, swap, mint. It is essentially "shadcn/ui for crypto, Base-native."

Headline components

<ConnectWallet /> — handles Coinbase Smart Wallet, injected, and more
<Identity /> + <Name /> + <Avatar /> — Basenames + ENS resolution
<Transaction /> — declarative tx with simulation + status
<Swap /> — embed a token swap in your app
<Mint /> — wrap any onchain mint

When to use it

If you are building a consumer Base app and your stack is Next.js/React, OnchainKit removes weeks of work. The components are designed to look good out of the box and theme cleanly.

Resources

onchainkit.xyz

Just read this. Now test it.

Take a quick quiz on this category — 10 questions, 5 seconds each.

Play Builder round