@coinbase/onchainkit NPM

OnchainKit

Documentation

For documentation and guides, visit onchainkit.xyz.

Features

OnchainKit offers four themes packed with React components and TypeScript utilities ready for action.

Overview

To integrate OnchainKit into your project, begin by installing the necessary packages.

# Yarn: Add library
yarn add @coinbase/onchainkit
# Yarn: Depending on the components or utilities you choose,
# you may end up utilizing any of those libraries.
yarn add viem@2.x react@18 react-dom@18

# or

# Use NPM
npm install @coinbase/onchainkit
npm install viem@2.x react@18 react-dom@18

# Use PNPM
pnpm add @coinbase/onchainkit
npm install viem@2.x react@18 react-dom@18

Then, feel free to utilize any of the components or utilities, such as FrameMetadata.

import { FrameMetadata } from '@coinbase/onchainkit';

export default function HomePage() {
  return (
    ...
    <FrameMetadata
      buttons={[
        {
          label: 'Tell me the story',
        },
        {
          action: 'link',
          label: 'Link to Google',
          target: 'https://www.google.com'
        },
        {
          action: 'post_redirect',
          label: 'Redirect to cute pictures',
        },
      ]}
      image={{
       src: 'https://zizzamia.xyz/park-3.png',
       aspectRatio: '1:1'
      }}
      input={{
        text: 'Tell me a boat story',
      }}
      postUrl="https://zizzamia.xyz/api/frame"
    />
    ...
  );
}