React components and TypeScript utilities for top-tier onchain apps.
For documentation and guides, visit onchainkit.xyz.
OnchainKit offers three themes packed with React components and TypeScript utilities ready for action.
-
- Utilities:
-
- Components:
- Utilities:
- Framegear
-
- Components:
- Utilities:
-
- Utilities:
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@18Then, 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"
/>
...
);
}Check out the following places for more OnchainKit-related content:
- Follow @zizzamia (X, Farcaster) for project updates
- Join the discussions on our OnchainKit warpcast channel
- @zizzamia (X)
- @cnasc (warpcast)
- @alvaroraminelli (X)
- @robpolak (X)
- @taycaldwell (X)
- @wespickett (X)
- @mochikuan (X)
This project is licensed under the MIT License - see the LICENSE.md file for details