Skip to content

Getting Started

OnchainKit is the easiest way for ANY developer to build beautiful onchain applications.

You can use OnchainKit in an existing project, by installing OnchainKit as a dependency.

Install

Let's install OnchainKit as a dependency along with its dependencies.

npm
npm install @coinbase/onchainkit

Public API Key

Obtain a Public API Key from the Coinbase Developer Platform APIs.

OnchainKit copy Public API Key

Create a .env file

Create a new file in your project’s root directory and name it .env.

OnchainKit define Public API Key

Define your Public API Key

Set your Public API Key by assigning the value you copied from the Coinbase Developer Platform to the PUBLIC_ONCHAINKIT_API_KEY variable.

.env
PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY

Access the Public API Key in your code

OnchainProviders.tsx
<OnchainKitProvider 
  apiKey={process.env.PUBLIC_ONCHAINKIT_API_KEY}
  chain={base}
>
  <YourComponents />
</OnchainKitProvider>

Configure the OnchainKitProvider

The <OnchainKitProvider /> component equips your app with the essential context to interact with OnchainKit components and utilities.

Set the chain prop to your target chain and provide the Public API Key to access the embedded APIs.

OnchainProviders.tsx
'use client';
import { ReactNode } from 'react';
import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';
 
type Props = { children: ReactNode };
 
function OnchainProviders({ children }: Props) {
  return (
    <OnchainKitProvider
      apiKey={process.env.PUBLIC_ONCHAINKIT_API_KEY} 
      chain={base}
    >
      <YourComponents />
    </OnchainKitProvider>
  );
};
 
export default OnchainProviders;

Configure the WagmiProvider

Many of OnchainKit's components require a WagmiProvider to access Wagmi utilities.

If your application already includes these settings, you can skip this step.

OnchainProviders.tsx
'use client';
import { ReactNode } from 'react';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 
import { base } from 'viem/chains';
import { WagmiProvider } from 'wagmi'; 
import { wagmiConfig } from './wagmi'; 
 
type Props = { children: ReactNode };
 
const queryClient = new QueryClient(); 
 
function OnchainProviders({ children }: Props) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider
          apiKey={process.env.PUBLIC_ONCHAINKIT_API_KEY}
          chain={base}
        >
          {children}
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider> 
  );
}
 
export default OnchainProviders;

Wrap Your App with OnchainProviders

Wrap your app with the OnchainProviders component to enable OnchainKit components and utilities.

layout.tsx
import { OnchainProviders } from './OnchainProviders'
 
export default function RootLayout({ children }) {
  return (
    <OnchainProviders>
      { children }
    </OnchainProviders> 
  )
}  

Style your components

All OnchainKit components come pre-configured with a style.

Simply place this at the top of your application's entry point to have the components working out of the box.

import '@coinbase/onchainkit/styles.css';

For tailwindcss users, follow the Tailwindcss Integration Guide.

Next Steps

Get started with ready-to-use onchain components.