Skip to content
Docs

Getting Started

OnchainKit is your go-to solution for building beautiful onchain applications.

In contrast with traditional front-end libraries, the front-end framework we create together comes with a powerful backend out of the box — Base chain, built on Ethereum and the Superchain.

Automatic Installation

OnchainKit Template

We recommend starting a new OnchainKit app using create onchain, which sets up everything automatically for you. To create a project, run:

npm create onchain@latest

After the prompts, create onchain will create a folder with your project name and install the required dependencies.

You can also checkout our pre-built templates:

Manual Installation

Add OnchainKit to your existing project manually.

Install OnchainKit

Install OnchainKit in your project.

npm i @coinbase/onchainkit@latest

Get Your Public API Key

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

OnchainKit copy Public API Key

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

OnchainKit define Public API Key

Add your Public API Key to the .env file:

.env
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY

Add Providers

Create a 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>
  );
}

Wrap your app with <Providers />

After the setup, wrap your app with the above <Providers /> component.

import './globals.css';
import { Providers } from './providers'; 
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

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'; 
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.

  • Update the appearance of components by using our built-in themes or crafting your own custom theme. Explore the possibilities in our Theming Guide.

Start building!

Explore our ready-to-use onchain components: