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

In order to use OnchainKit, you need to wrap your app with three providers:

1. <WagmiProvider />
2. <QueryClientProvider />
3. <OnchainKitProvider />

To accomplish this, we recommend creating a wagmi.ts file and an AppProviders.tsx file within the src directory.

You must add base as a supported chain in the Wagmi configuration file wagmi.ts. You can use baseSepolia for testing.

import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
import { base } from 'wagmi/chains'; // add baseSepolia for testing
import { coinbaseWallet } from 'wagmi/connectors';
 
export function getConfig() {
  return createConfig({
    chains: [base], // add baseSepolia for testing
    connectors: [
      coinbaseWallet({
        appName: 'OnchainKit',
        preference: 'smartWalletOnly',
        version: '4',
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [base.id]: http(), // add baseSepolia for testing
    },
  });
}
 
declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

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.