Skip to content

React components and TypeScript utilities for top-tier onchain apps.

License

Notifications You must be signed in to change notification settings

Nichebiche/coinbase-onchainkit

 
 

Repository files navigation

OnchainKit logo vibes

OnchainKit

React components and TypeScript utilities for top-tier onchain apps.

Version MIT License Downloads per month Minified + gzip package size for @coinbase/onchainkit in KB


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 [email protected] react@18 react-dom@18

# or

# Use NPM
npm install @coinbase/onchainkit
npm install [email protected] react@18 react-dom@18

# Use PNPM
pnpm add @coinbase/onchainkit
npm install [email protected] 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"
    />
    ...
  );
}

Community ☁️ 🌁 ☁️

Check out the following places for more OnchainKit-related content:

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

About

React components and TypeScript utilities for top-tier onchain apps.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 85.1%
  • MDX 14.0%
  • Other 0.9%