@coinbase/onchainkit
v0.14.0
Published
<p align="center"> <a href="https://onchainkit.xyz"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/logo/v0-13.png"> <img alt="OnchainKit logo vibes" src="./site/docs/public/logo/v0-13.png" width="auto"
Downloads
15,127
Maintainers
Keywords
Readme
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 [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:
- Follow @zizzamia (X, Warpcast) for project updates
- Join the discussions on our OnchainKit warpcast channel
Authors
License
This project is licensed under the MIT License - see the LICENSE.md file for details