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):

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