Install and configure OnchainKit with Remix. If you are integrating OnchainKit into an existing project, skip to the OnchainKit installation.

1

Install Remix

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

Terminal
npx create-remix@latest
2

Install OnchainKit

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

npm install @coinbase/onchainkit
3

Get A Client API Key

Get your Client API Key from Coinbase Developer Platform.

OnchainKit copy Client API Key

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

OnchainKit define Client API Key

Add your Client API Key to the .env file:

.env
PUBLIC_ONCHAINKIT_API_KEY=YOUR_CLIENT_API_KEY

Update the app/root.tsx file to provide access to your Client API Key through window.ENV:

app/root.tsx
declare global {
  interface Window {
    ENV: {
      PUBLIC_ONCHAINKIT_API_KEY: string; 
    };
  }
}

export async function loader() {
  return json({
    ENV: {
      PUBLIC_ONCHAINKIT_API_KEY: process.env.PUBLIC_ONCHAINKIT_API_KEY, 
    },
  });
}

If this is the first env variable you’ve added to your project, you will need to update the Layout component of app/root.tsx to make it available to your app:

app/root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
  const data = useLoaderData<typeof loader>(); 
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <script
          dangerouslySetInnerHTML={{ 
            __html: `window.ENV = ${JSON.stringify( 
              data.ENV
            )}`, 
          }}
        />
        <Scripts />
      </body>
    </html>
  );
}
4

Add Providers

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.

providers.tsx
// @noErrors: 2307 2580 2339 - cannot find 'process', cannot find './wagmi', cannot find 'import.meta'
'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 }) {
  const apiKey =
    typeof window !== 'undefined'
      ? window.ENV?.PUBLIC_ONCHAINKIT_API_KEY
      : undefined;
  return (
    <OnchainKitProvider
      apiKey={apiKey}
      chain={base} // add baseSepolia for testing
    >
      {props.children}
    </OnchainKitProvider>
  );
}
5

Wrap your app with <AppProviders />

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

app.tsx
import { AppProviders } from 'src/AppProviders';

export default function App() {
  return (
    <AppProviders>
      <Outlet />
    </AppProviders>
  );
}
6

Import OnchainKit Styles

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 />:

app.tsx
import { AppProviders } from 'src/AppProviders';
import '@coinbase/onchainkit/styles.css'; 

export default function App() {
  return (
    <AppProviders>
      <Outlet />
    </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.

​
Start building!

Explore our ready-to-use onchain components: