npm package: @flood-protocol/connectkit
Description: Connecting a wallet, made simple.
Author: Family
Latest version: 1.7.0-1

<a href="https://docs.family.co/connectkit">
  <img width="1080" alt="connectkit" src="https://github.com/family/connectkit/assets/1930210/87c2e868-3228-44b8-82c3-a38adf6d1bbf">
</a>



# 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 git@github.com: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.