OnchainKit: Production-Ready React Components for Building Onchain Apps on Base and OP Stack Chains

Discover OnchainKit, a battle-tested React UI library that simplifies building onchain applications on Base and other OP Stack chains with accessible, performant components.

Discover OnchainKit: Your Go-To Toolkit for Onchain Development

Building decentralized applications (dApps) on blockchain networks like Base and other OP Stack chains can be a complex endeavor. Enter OnchainKit, a comprehensive React UI library designed specifically to streamline this process. It provides production-ready, accessible, and highly performant components that integrate seamlessly with tools like Wagmi and Viem. Whether you're crafting wallet connections, transaction buttons, or account displays, OnchainKit handles the heavy lifting so you can focus on innovation.

This library stands out because it's battle-tested in real-world deployments across the Base ecosystem. Components are WCAG-compliant for accessibility, optimized for speed with techniques like tree-shaking, and fully customizable to match your app's design language. If you're developing onchain experiences—think NFT marketplaces, DeFi dashboards, or social dApps—OnchainKit accelerates your workflow while ensuring reliability.

Why Choose OnchainKit Over Other UI Libraries?

In the crowded space of Web3 UI kits, OnchainKit differentiates itself through practical advantages:

• Production-Ready Reliability: Used in high-traffic Base apps, it withstands real user loads without hiccups.
• Accessibility First: All components meet AA WCAG standards, including keyboard navigation and screen reader support—crucial for inclusive Web3.
• Performance Optimized: Leverages React Server Components where possible, with lightweight bundles via tree-shaking.
• Deep Customization: Tailor themes, styles, and behaviors with CSS variables and props for pixel-perfect integration.
• Seamless Integrations: Works out-of-the-box with Wagmi for state management and Viem for blockchain interactions.
• Multi-Chain Support: Primarily for Base and OP Stack, but extensible to other EVM chains.

Real-world example: Imagine launching a token airdrop dApp. With OnchainKit, you drop in a SendTransactionButton pre-configured for Base, handling gas estimates and user confirmations effortlessly.

Check out the full source and examples at the OnchainKit GitHub repository.

Quickstart: Get Up and Running in Minutes

Using Vite for a Fresh React App

Start with a Vite template for lightning-fast development:

npm create vite@latest my-onchain-app -- --template react-ts
cd my-onchain-app
npm install
npm install @onchainkit/react wagmi viem @tanstack/react-query

Wrap your app with the necessary providers in main.tsx:

import { createApp } from 'react';
import { WagmiProvider } from 'wagmi';
import { base } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OnchainKitProvider } from '@onchainkit/react';
import App from './App.tsx';

const queryClient = new QueryClient();

createApp(<WagmiProvider config={/* your Wagmi config for Base */}>
  <QueryClientProvider client={queryClient}>
    <OnchainKitProvider>
      <App />
    </OnchainKitProvider>
  </QueryClientProvider>
</WagmiProvider>);

Now, import and use components like ConnectButton in your App.tsx:

import { ConnectButton } from '@onchainkit/react';

function App() {
  return <ConnectButton />;
}

Run npm run dev and connect a wallet instantly.

Next.js Setup for SSR-Optimized Apps

For apps needing server-side rendering:

npx create-next-app@latest my-onchain-next-app --typescript --tailwind --eslint --app
cd my-onchain-next-app
npm install @onchainkit/react wagmi viem @tanstack/react-query

Configure providers in app/layout.tsx:

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OnchainKitProvider } from '@onchainkit/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const queryClient = new QueryClient();
  return (
    <html>
      <body>
        <WagmiProvider config={/* Base config */}>
          <QueryClientProvider client={queryClient}>
            <OnchainKitProvider>{children}</OnchainKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Explore a complete demo app at https://github.com/onchainkit/onchainkit/tree/main/apps/onchainkit-dapp.

Core Components: Building Blocks for Every Onchain Feature

OnchainKit offers 20+ components, each with detailed props for flexibility. Here's a breakdown with practical usage.

Wallet Connection

• AllWalletsButton: Connects via Coinbase Smart Wallet, injected providers, or WalletConnect. Props: accountStatus, customMessage, onClose, etc.

import { AllWalletsButton } from '@onchainkit/react'; <AllWalletsButton accountStatus={{ address: '0x...', ensName: 'vitalik.eth' }} />

- **`ConnectWalletButton`**: Simple wallet connect. Customizable text and actions.

### Account Management

- **`Account`**: Displays address, ENS, balance. Props: `address`, `showEnsName`, `ensName`, `balance`.
Example: Perfect for headers—shows truncated address or ENS with native token balance.

- **`AccountModal` and `useAccountModal`**: Trigger modals for account details, send/copy/share.

### Transactions and Balances

- **`Balance`**: Fetches and displays token balances. Supports ERC20 via `tokenAddress` prop.

- **`SendTransactionButton`**: Handles transfers with gas management. Props: `account`, `to`, `value`.
Real-world: Use for tipping in a social dApp.
```tsx
<SendTransactionButton to="0xRecipient" value="0.01" />

• SmartAccountSendTransactionButton: For ERC-4337 smart accounts.

• SignMessageButton and SignTypedDataButton: Secure signing UIs.

Tokens and NFTs

• TokenBadge: Displays token icons/names. Props: address, amount, name.

• NFTs: Grid of user NFTs with metadata fallback.

Notifications

• Notification: Toast-like alerts for tx status. Customizable themes.

Multi-Chain Awareness

• AllChains: Dropdown for chain switching on Base Sepolia, Base Mainnet, etc.

Other notables: ConnectButton, EnsAvatar, WalletSelectorModal. All components support dark/light modes via CSS vars like --ok-bg-1.

Dive into React package details: https://github.com/onchainkit/onchainkit/tree/main/packages/react.

Powerful Hooks for Custom Logic

Extend components with hooks:

• useAccountModal(): Manages account modal state.
• useEnsAvatar(address): Fetches ENS avatars with fallbacks.
• useNotification(): Triggers notifications programatically.
• useWalletSelectorModal(): Wallet selection flows.

Example: Custom hook integration for dynamic balance refreshes.

const { data: avatar } = useEnsAvatar({ address: '0x...' });

Utilities: Chain Configs and RPCs

Pre-built constants simplify setup:

import { RPC_URLS } from '@onchainkit/utils';
// RPC_URLS.base contains Base Mainnet URLs
const config = createConfig({ chains: [base], transports: { [base.id]: http(RPC_URLS.base.mainnet) } });

Available: CHAIN_IDENTIFIERS, CHAIN_NAMES, EXPLORER_URLS, RPC_URLS for Base, OP Mainnet, etc.

Contributing and Community

OnchainKit is open-source under MIT license. Fork the repo, install deps with pnpm install, and submit PRs. Focus areas: new components, accessibility fixes, multi-chain expansions.

Join the Base developer community for feedback. Your contributions make onchain apps better for everyone.

Real-World Applications and Tips

• DeFi Dashboard: Combine Balance, SendTransactionButton, Account for portfolio views.
• NFT Gallery: NFTs + EnsAvatar for social proof.
• Optimization Tip: Use disableAnimation prop for mobile perf.
• Theming: Override --ok-fg-primary for brand colors.

With OnchainKit, go from prototype to production faster. Start building today!