web3-ui

In Development 🏗️

A library of UI components specifically crafted for web3 use cases.

Package name	Current version
@web3-ui/core
@web3-ui/components
(Deprecated) @web3-ui/hooks

Quick start

1. Install the package

$ yarn add @web3-ui/core ethers

2. Setup the Provider

import { Provider, NETWORKS } from '@web3-ui/core';

function MyApp({ Component, pageProps }) {
  return (
    <Provider network={NETWORKS.mainnet}>
      <Component {...pageProps} />
    </Provider>
  );
}

3. Use the components and hooks

import { ConnectWallet, useWallet } from '@web3-ui/core';

function Home() {
  const { connection } = useWallet();

  return (
    <div>
      <ConnectWallet />
      <div>{connection.ens || connection.userAddress}</div>
    </div>
  );
}

Do note that you can also install & use the components and hooks packages separately. They are completely independent. The core package is an opinionated combination of the components and hooks packages.

How to Contribute

Read the CONTRIBUTING GUIDELINES.

The motive behind this package

• RFC: web3-ui (a web3-specific UI library)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Erik Ritter 💻 👀	Camila Rondinini 💻 👀	Dhaiwat Pandya 💻 👀	Nazeeh Vahora 💻 📖	Jose L. Velez 📖 💻	with-heart 👀 💻	Christian 💻
Alex 💻	Sam Wellander 📖	Todor Tsankov 💻	Jovi De Croock 💻	Bonhomme 💻	hone1er 💻	Emanuel López 💻
Greg Syme 💻	Casuneanu Catalin 💻	Jake Warren 💻	Carlo Miguel Dy 💻 📖	Akshata Mohanty 📖	Ibby E 💻	Sweta Shaw 💻
Snehit Paunikar 📖	Nathan Ng 💻	manny 💻	fangjun 📖	Julian Krispel-Samsel 📖	Ikko Ashimine 📖	Leonardo Berteotti 💻
Patrick Aljord 💻	Shamoil Arsiwala 💻	Ernesto García 💻	David 💻	Eric Roupe 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Special thanks

This project would not have been possible without these wonderful projects:

• ethers
• scaffold-eth
• Chakra UI
• web3modal
• useDApp
• wagmi
• Storybook
• Preconstruct