OnchainKit

React components and TypeScript utilities to help you build top-tier onchain apps.

🚀 Quickstart

Run npm create onchain to bootstrap an example onchain app with all the batteries included.

⚙️ OnchainKitProvider Setup

Wrap your app with OnchainKitProvider to enable OnchainKit components:

import { OnchainKitProvider } from '@coinbase/onchainkit';
import { base } from 'wagmi/chains';

<OnchainKitProvider
  chain={base}                    // Required: Target chain
  apiKey="YOUR_CDP_API_KEY"       // Recommended: Enables Paymaster, Identity, etc.
>
  {children}
</OnchainKitProvider>

Configuration Options

Prop	Required	Description
chain	✅ Yes	Target chain (e.g., base, baseSepolia from wagmi/chains)
children	✅ Yes	Your app components
apiKey	Recommended	CDP API Key - enables Paymaster, Identity resolution, and other features
projectId	Optional	CDP Project ID for analytics
rpcUrl	Optional	Custom RPC URL (defaults to chain's public RPC)
config	Optional	Appearance and wallet configuration (see below)
miniKit	Optional	Mini App configuration

Config Object

config={{
  appearance: {
    name: 'My App',           // App name shown in wallet prompts
    logo: 'https://...',      // App logo URL
    mode: 'auto',             // 'light' | 'dark' | 'auto'
    theme: 'default',         // Theme preset
  },
  wallet: {
    display: 'classic',       // 'classic' | 'modal'
    preference: 'all',        // 'all' | 'smartWalletOnly' | 'eoaOnly'
  },
}}

Note: Without an apiKey, features like sponsored transactions (Paymaster) and ENS/Basename resolution won't work. Get your free API key at CDP Portal.

✨ Documentation

For documentation and guides, visit onchainkit.xyz.

🛠️ Contributing

Overview

This project is set up as a monorepo with pnpm workspaces.

Requirements

• Node.js v20
• pnpm v10

Getting Started

1. Clone the repository

git clone https://github.com/coinbase/onchainkit.git

2. Install dependencies

pnpm install

Running packages

To run a script in a single package, use the following command:

pnpm [-F | --filter] <package-name> <script-name>

To run a script in all packages, use the following command:

pnpm run <script-name>

Shorthands

We provide shorthands to filter by project in the root package.json.

The following shorthands are available:

• pnpm f:ock: pnpm --filter @coinbase/onchainkit
• pnpm f:play: pnpm --filter playground
• pnpm f:create: pnpm --filter create-onchain
• pnpm f:manifest: pnpm --filter miniapp-manifest-generator

Development

When working on components, you can build OnchainKit in watch mode and start the playground to view your components with the following command:

pnpm f:play dev:watch

Then, you can view the playground at http://localhost:3000.

🌁 Team and Community

• OnchainKit (X, Warpcast)
• Tina He (X)
• Mind Apivessa (X)
• Alissa Crane (X)
• Alec Chen (X)
• Paul Cramer (X)
• Shelley Lai (X, Warpcast)
• Léo Galley (X)
• Adam Lessey (X)

💫 Contributors

🌊 License

This project is licensed under the MIT License - see the LICENSE.md file for details