Getting Started
OnchainKit is your go-to solution for building beautiful onchain applications, regardless of your development experience.
Quickstart
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
- Get your Public API Key from the Coinbase Developer Platform APIs.
-
Create a
.env
file in your project's root directory. -
Add your Public API Key to the
.env
file:
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
.
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:
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:
Identity
- Show Basename, avatars, badges, and addresses.Wallet
- Create or connect wallets with Connect Wallet.Transaction
- Handle transactions using EOAs or Smart Wallets.Tokens
- Search and display tokens with various components.Swap
- Enable token swaps in your app.Frame
- Build and test Farcaster frames.