Skip to content
Docs

Remix Installation

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

Install Remix

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

npx create-remix@latest

Install OnchainKit

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

npm
npm install @coinbase/onchainkit

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:

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:

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

Configure Providers

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.

wagmi.ts
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>;
  }
}

Wrap your app with <AppProviders />

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>
      <Outlet />
    </AppProviders>
  );
}

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

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: