Loading...
Loading...
Back to Blog
Developer Tools
OnchainKit: Production-Ready React Components for Building Onchain Apps on Base and OP Stack Chains
Claude Directory December 1, 2025
2 views
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](https://wagmi.sh) and [Viem](https://viem.sh). 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](https://github.com/onchainkit/onchainkit).
## Quickstart: Get Up and Running in Minutes
### Using Vite for a Fresh React App
Start with a Vite template for lightning-fast development:
```bash
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`:
```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`:
```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:
```bash
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`:
```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](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.
```tsx
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](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.
```tsx
const { data: avatar } = useEnsAvatar({ address: '0x...' });
```
## Utilities: Chain Configs and RPCs
Pre-built constants simplify setup:
```tsx
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!
<div style="text-align: center; margin-top: 2rem;">
<a href="https://cursor.directory/onchainkit" target="_blank" rel="noopener noreferrer" class="view-full-resource-btn" style="display: inline-block; background-color: #f97316; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.2s;">View Full Resource</a>
</div>
Comments
More Blog
View allClaude for Developers
Building Voice Agents with Claude API and ElevenLabs: Conversational AI Guide
Build natural voice agents combining Claude API's superior reasoning with ElevenLabs' lifelike TTS. This end-to-end guide creates a conversational web app with STT, AI chat, and speech synthesis.
C
Claude Directory 2
Model Comparisons
Claude vs Mistral Large 2: 2025 Data Analysis Benchmarks and Use Cases
As data volumes explode in 2025, choosing between Claude's reasoning depth and Mistral Large 2's efficiency is critical. We benchmark SQL generation, visualizations, and large datasets to reveal the w
C
Claude Directory 1
Enterprise
Claude Enterprise for Cybersecurity: Threat Modeling and Incident Response
In the high-stakes world of cybersecurity, rapid threat modeling and incident response can mean the difference between containment and catastrophe. Discover how Claude Enterprise empowers security tea
C
Claude Directory 1
Claude Code
Claude Code in VS Code: Custom Commands for Refactoring Large Codebases
Refactoring sprawling codebases manually? Harness Claude Code's power in VS Code with custom commands to automate AI-driven refactors across TypeScript and Python projects—saving hours of drudgery.
C
Claude Directory 1
Claude for Developers
Claude SDK Rust for Blockchain: Smart Contract Auditing Agents
Build blazing-fast smart contract auditing agents in Rust using the Claude SDK. Harness Claude's reasoning to scan Solidity code for vulnerabilities like reentrancy and overflows.
C
Claude Directory 1
Claude Best Practices
Advanced Claude Artifacts: Collaborative Editing in Multi-User Sessions
Elevate team productivity with Claude Artifacts in multi-user projects—enable real-time iterative editing for code reviews and docs without leaving the interface.
C
Claude Directory 1