https://github.com/coinbase/onchainkit
React components and TypeScript utilities to help you build top-tier onchain apps.
https://github.com/coinbase/onchainkit
coinbase component-library onchain react tailwindcss typescript ui ui-components wagmi web3
Last synced: 5 days ago
JSON representation
React components and TypeScript utilities to help you build top-tier onchain apps.
- Host: GitHub
- URL: https://github.com/coinbase/onchainkit
- Owner: coinbase
- License: mit
- Created: 2023-12-11T23:36:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T16:32:08.000Z (11 days ago)
- Last Synced: 2025-04-04T16:34:30.341Z (11 days ago)
- Topics: coinbase, component-library, onchain, react, tailwindcss, typescript, ui, ui-components, wagmi, web3
- Language: TypeScript
- Homepage: https://www.base.org/builders/onchainkit
- Size: 201 MB
- Stars: 787
- Watchers: 18
- Forks: 295
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-web3 - OnchainKit - Collection of tools to build world-class onchain apps with CSS, React, and Typescript. (Software Development / JavaScript)
- awesome-frames - Onchainkit: Deploy onchain
README
OnchainKit
React components and TypeScript utilities to help you build top-tier onchain apps.
## đ Quickstart
Run `npm create onchain` to boostrap an example onchain app with all the batteries included.
## ⨠Documentation
For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/).
## đ ī¸ Contributing
### Overview
This project is set up as a monorepo with pnpm workspaces.
### Requirements
- Node.js v18
- pnpm v10
### Getting Started
1. Clone the repository
```bash
git clone https://github.com/coinbase/onchainkit.git
```
2. Install dependencies
```bash
pnpm install
```
### Running packages
To run a script in a single package, use the following command:
```bash
pnpm [-F | --filter]
```
To run a script in all packages, use the following command:
```bash
pnpm run
```
### Shorthands
We provide shorthands to filter by project in the root `package.json`.
The following shorthands are available:
- `pnpm f:ock`: `pnpm --filter @coinbase/onchainkit`
- `pnpm f:play`: `pnpm --filter playground`
- `pnpm f:create`: `pnpm --filter create-onchain`
- `pnpm f:manifest`: `pnpm --filter miniapp-manifest-generator`
### Development
When working on components, you can build OnchainKit in watch mode and start the playground to view your components with the following command:
```bash
pnpm f:play dev:watch
```
Then, you can view the playground at [http://localhost:3000](http://localhost:3000).
## đ Team and Community
- **OnchainKit** ([X](https://x.com/Onchainkit), [Warpcast](https://warpcast.com/onchainkit))
- [Tina He](https://github.com/fakepixels) ([X](https://x.com/fkpxls))
- [Mind Apivessa](https://github.com/mindapivessa) ([X](https://x.com/spicypaprika_))
- [Alissa Crane](https://github.com/abcrane123) ([X](https://x.com/abcrane123))
- [Alec Chen](https://github.com/0xAlec) ([X](https://x.com/0xAlec))
- [Paul Cramer](https://github.com/cpcramer) ([X](https://x.com/PaulCramer_))
- [Shelley Lai](https://github.com/0xchiaroscuro) ([X](https://x.com/hey_shells), [Warpcast](https://warpcast.com/chiaroscuro))
- [LÊo Galley](https://github.com/kirkas) ([X](https://x.com/artefact_lad))
- [Adam Lessey](https://github.com/alessey) ([X](https://x.com/alessey))
## đĢ Contributors
## đ License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details