Skip to content
Docs

Getting Started

OnchainKit is your go-to solution for building beautiful onchain applications, regardless of your development experience.

Quickstart

OnchainKit Template

The fastest way to get started is to fork the Onchain App Template.

Set your environment variables in an .env file and start building.

You can also checkout other templates such as funding flow or social profile.

Walkthrough

Install OnchainKit

Install OnchainKit in your project.

npm i @coinbase/onchainkit@latest

If you're starting from scratch, we recommend using create-wagmi to scaffold your project.

npm create wagmi@latest
cd your-project-name
npm i @coinbase/onchainkit@latest

Get Your Public API Key

  1. Get your Public API Key from the Coinbase Developer Platform APIs.
OnchainKit copy Public API Key

  1. Create a .env file in your project's root directory.

    OnchainKit define Public API Key

  2. Add your Public API Key to the .env file:

.env
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY

Add Providers

In your providers.tsx file, add OnchainKitProvider as a child of WagmiProvider and QueryClientProvider.

Inside the WagmiProvider, wrap your app in a TanStack Query React Context Provider, e.g. QueryClientProvider, and pass a new QueryClient instance to the client property.

Additionally, add Base as a supported chain in the Wagmi configuration file wagmi.ts.

providers.tsx
import { OnchainKitProvider } from '@coinbase/onchainkit'; 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { base } from 'wagmi/chains'; 
import { type ReactNode, useState } from 'react';
import { type State, WagmiProvider } from 'wagmi';
 
import { getConfig } from '@/wagmi';
 
export function Providers(props: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getConfig());
  const [queryClient] = useState(() => new QueryClient());
 
  return (
    <WagmiProvider config={config} initialState={props.initialState}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider
          apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
          chain={base}
        >
          {props.children}
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Add Styles

OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of this file:

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

For example, if you're using Next.js with the app router, your app/layout.tsx might look like this:

layout.tsx
import '@coinbase/onchainkit/styles.css'; // [!code ++]
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { headers } from 'next/headers';
import { type ReactNode } from 'react';
import { cookieToInitialState } from 'wagmi';
 
import { getConfig } from '../wagmi';
import { Providers } from './providers';
 
const inter = Inter({ subsets: ['latin'] });
 
export const metadata: Metadata = {
  title: 'Create Wagmi',
  description: 'Generated by create-wagmi',
};
 
export default function RootLayout(props: { children: ReactNode }) {
  const initialState = cookieToInitialState(
    getConfig(),
    headers().get('cookie')
  );
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers initialState={initialState}>{props.children}</Providers>
      </body>
    </html>
  );
}

This ensures that the OnchainKit styles are loaded and applied to your entire application.

For Tailwind CSS users, check out our Tailwind Integration Guide.

Start building!

Explore our ready-to-use onchain components: