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

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.

Read the CONTRIBUTING GUIDELINES.

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

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!

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

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