Create a new Vite project by using the Vite CLI. More information about Vite can be found here.

npm create vite@latest

During the setup process you will encounter multiple prompts. Make sure you select React and TypeScript.

Add OnchainKit to your project by installing the @coinbase/onchainkit package.

npm install @coinbase/onchainkit

Get your Client API Key from Coinbase Developer Platform.

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

Add your Client API Key to the .env file:

VITE_PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY

Create a providers.tsx file. Add OnchainKitProvider with your desired config.

Under the hood, OnchainKit will create our recommended Wagmi and QueryClient providers. If you wish to customize these providers, check out Custom Supplemental Providers.

'use client';
 
import type { ReactNode } from 'react';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { base } from 'wagmi/chains'; // add baseSepolia for testing
 
export function Providers(props: { children: ReactNode }) {
  return (
    <OnchainKitProvider
      apiKey={import.meta.env.VITE_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base} // add baseSepolia for testing
    >
      {props.children}
    </OnchainKitProvider>
  );
}

After configuring the providers in step 4, wrap your app with the <AppProviders /> component.

import { AppProviders } from 'src/AppProviders';
 
export default function App() {
  return (
    <AppProviders>
      <YourApp />
    </AppProviders>
  );
}

OnchainKit components come with pre-configured styles. To include these styles in your project, add the following import statement at the top of the file where imported <AppProviders />:

import { AppProviders } from 'src/AppProviders';
import '@coinbase/onchainkit/styles.css'; 
 
export default function App() {
  return (
    <AppProviders>
      <YourApp />
    </AppProviders>
  );
}

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.