Beautiful and lightweight UI components for web3 developers. This UI library will speed up your dapp development no matter which chain you build on.
Live StoryBook DEMO: https://web3ui.github.io/web3uikit/
Star us
If this ui-kit helps you build your dApps faster - please star this project, every star makes us very happy!
Need help?
If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this boilerplate is the super active community ready to help at any time! We help each other.
Quick Start
npm install @web3uikit/web3
or
yarn add @web3uikit/web3
Follow moralis docs to start your server and connect to SDK. This required to use components in this package.
import { NFT } from '@web3uikit/web3';
const App = () => (
<>
<NFT
address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
chain="eth"
fetchMetadata={true}
tokenId="1"
/>
</>
);
If you are using web3uikit
with Next.js, be sure to follow the official guide, since we are using styled-components
under the hood.
Table of contents
Web3 Components
<ConnectButton />
The <ConnectButton />
component allows you to make web3 authenticating users in case your server is initialized. When the server is not initialized, or for example, you have <MoralisProvider initializeOnMount={false} >
and you don't want to connect your Moralis server to the frontend the smart component will call enableWeb3()
If you want to use this component with the connected server but without adding a user to Moralis Database you can add the moralisAuth
prop
The ConnectButton component automatically adds to the local storage info about the connector user used and will automatically call enableWeb3() after refreshing the page. So if user was connected once it will automatically initialize web3 connection(No need anymore to add UseEffect hook for enableWeb3() after refreshing the page)
Try the <ConnectButton />
component in the interactive documentation
<NFT />
The <NFT />
component allows you to display a single NFT as Card. By clicking on the card you can also view all the traits of the NFT.It uses hooks from react-moralis to fetch the NFT.
If you want to use this component wrap your app with <MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >
. Read more about moralis here
Try the <NFT />
component in the interactive documentation
<NFTBalance />
The <NFTBalance />
component allows you to display all the NFT's an address owns. It uses hooks from react-moralis to fetch all NFT's of an address.
If you want to use this component wrap your app with <MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >
. Read more about moralis here
Try the <NFTBalance />
component in the interactive documentation
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。