Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/family/connectkit
Connecting a wallet, made simple.
https://github.com/family/connectkit
coinbase dapp ethereum metamask react typescript viem wagmi walletconnect web3
Last synced: about 2 months ago
JSON representation
Connecting a wallet, made simple.
- Host: GitHub
- URL: https://github.com/family/connectkit
- Owner: family
- License: bsd-2-clause
- Created: 2022-09-26T14:13:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T14:26:58.000Z (9 months ago)
- Last Synced: 2024-04-14T10:37:02.435Z (8 months ago)
- Topics: coinbase, dapp, ethereum, metamask, react, typescript, viem, wagmi, walletconnect, web3
- Language: TypeScript
- Homepage: https://docs.family.co/connectkit
- Size: 4.21 MB
- Stars: 774
- Watchers: 4
- Forks: 162
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - family/connectkit - Connecting a wallet, made simple. (TypeScript)
README
# ConnectKit
ConnectKit is a powerful [React](https://reactjs.org/) component library for connecting a wallet to your dApp. It supports the most popular connectors and chains out of the box and provides a beautiful, seamless experience.
## Features
- 💡 TypeScript Ready — Get types straight out of the box.
- 🌱 Ecosystem Standards — Uses top libraries such as [wagmi](https://github.com/wagmi-dev/wagmi).
- 🖥️ Simple UX — Give users a simple, attractive experience.
- 🎨 Beautiful Themes — Predesigned themes or full customization.
and much more...
## Quick Start
Get started with a ConnectKit + [wagmi](https://wagmi.sh/) + [viem](https://viem.sh) project by running one of the following in your terminal:
#### npm
```sh
npx create-react-app my-app --template cra-template-connectkit
```
#### yarn
```sh
yarn create react-app my-app --template cra-template-connectkit
```
#### pnpm
```sh
pnpm dlx create-react-app ./my-app --template cra-template-connectkit
```
## Documentation
You can find the full ConnectKit documentation in the Family docs [here](https://docs.family.co/connectkit).
## API Reference
You can find the full API Reference in the Family docs [here](https://docs.family.co/connectkit/api-reference).
## Examples
There are various runnable examples included in this repository in the [examples folder](https://github.com/family/connectkit/tree/main/examples):
- [Create React App Example (TypeScript)](https://github.com/family/connectkit/tree/main/examples/cra)
- [Next.js Example (TypeScript)](https://github.com/family/connectkit/tree/main/examples/nextjs)
- [Vite Example (TypeScript)](https://github.com/family/connectkit/tree/main/examples/vite)
### Try in CodeSandbox
You can try out some ConnectKit examples directly in your browser through CodeSandbox:
- [Create React App Example (TypeScript)](https://codesandbox.io/s/5rhqm0?file=/README.md)
- [Next.js (TypeScript)](https://codesandbox.io/s/qnvyqe?file=/README.md)
- [Vite Example (TypeScript)](https://codesandbox.io/s/4jtssh?file=/README.md)
### Running Examples Locally
Clone the ConnectKit project and install the necessary dependencies:
```sh
$ git clone [email protected]:family/connectkit.git
$ cd connectkit
$ yarn install
```
and start the code bundler:
```sh
$ yarn dev:connectkit
$ yarn dev:connectkit-next-siwe
```
and then simply select the example you'd like to run:
```sh
$ yarn dev:vite # Vite
$ yarn dev:nextjs # Next.js
$ yarn dev:nextjs-siwe # Next.js with SIWE
$ yarn dev:cra # Create React App
```
## Contribute
Before starting on anything, please have a read through our [Contribution Guidelines](https://github.com/family/connectkit/blob/main/CONTRIBUTING.md).
## Twitter
Follow [@family](https://twitter.com/family) on Twitter for the latest updates on ConnectKit.
## License
See [LICENSE](https://github.com/family/connectkit/blob/main/LICENSE) for more information.