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

Install the package

$ yarn add @web3-ui/core ethers

Setup the Provider

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

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

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} 💻	_{James Charlesworth} 💻	_{Ricardo Seromenho} 💻