Repository files navigation

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/

If this ui-kit helps you build your dApps faster - please star this project, every star makes us very happy!

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.

npm install @web3uikit/core @web3uikit/web3 @web3uikit/icons

or

yarn add  @web3uikit/core @web3uikit/web3 @web3uikit/icons

ℹ️ Each package can be installed separately.

import{CryptoCards,Button}from'@web3uikit/core';constApp=()=>(<><CryptoCardschain="ethereum"bgColor="blue"chainType="Network"onClick={console.log}/><Buttontheme="primary"type="button"text="Launch Dapp"/></>);

If you are usingweb3uikit with Next.js, be sure to follow theofficial guide, since we are usingstyled-components under the hood.

• ⭐️ Star us
• 🤝 Need help
• 🚀 Quick start
• 🧭 Table of Contents
• 🏗️ New Components
• 📦 Packages
  • Core module
  • Icons module
  • Web3 module
• 🧙‍♂️ Community

Remember to follow steps fromCONTRIBUTE.md to setup your local environment.

• runpnpm new in terminal and follow the interactive steps to generate templates for a new component.

• Add the svg file(s) toweb3uikit/packages/icons/src/lib/svgs/ (remember to give meaningful filename, as filename gets converted to icon name)
• runpnpm run icons:create in terminal and your icon is created. 🔥
• To verify your newly added icon runpnpm storybook-build. Once storybook is open, navigate to8.ICONS/Gallery and search for your icon.

• runpnpm plop "ChainLogo" -- --name "<CHAIN NAME HERE>" --color "<BACKGROUND COLOR HERE>"

  example =>pnpm plop "ChainLogo" -- --name "ethereum" --color "#396993"

• Now in your code editor navigate toweb3uikit/packages/core/src/lib/Illustrations/images/chains, here a new file must be created with your chain name, in this file replace<></> with your chainsvg code.

• To verify your newly added chain logo runpnpm storybook-build. Once storybook is open:

  • navigate to6.Graphic, and your chain logo should be added toIllustration andCryptoLogo component.
  • navigate to4.UI/CryptoCards, and your chain logo should be added here as well. 😃

The core module contains all the basic ui components like button, input, dropdown etc

Create an issue with svg code to add more icons or feel free to raise a PR.

These are components which havemoralis andreact-moralis dependency.

‼️ Moralis servers will be deprecated soon. To continue using this package, self host your server by following the steps frommoralis docs

• Icon component does not exist anymore.

• All component prop type usingTIconType are now converted toJSX.Element. List of components that used TIconType prop are:

  • Button
  • Credentials
  • CryptoCards
  • Dropdown
  • Input
  • Notification
  • PopoverElement
  • Select

• Discord
• Forum