Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/web3ui/web3uikit
Lightweight reusable Web3 UI components for dapps.
https://github.com/web3ui/web3uikit
dapp dapp-ui ethereum ethereum-boilerplate ethers metamask react solana walletconnect web3 web3-dapp web3-react web3-ui web3js web3ui web3uikit
Last synced: 29 days ago
JSON representation
Lightweight reusable Web3 UI components for dapps.
- Host: GitHub
- URL: https://github.com/web3ui/web3uikit
- Owner: web3ui
- License: mit
- Created: 2021-12-29T09:10:21.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T21:09:00.000Z (7 months ago)
- Last Synced: 2024-09-28T10:01:23.957Z (about 1 month ago)
- Topics: dapp, dapp-ui, ethereum, ethereum-boilerplate, ethers, metamask, react, solana, walletconnect, web3, web3-dapp, web3-react, web3-ui, web3js, web3ui, web3uikit
- Language: TypeScript
- Homepage: https://web3uikit.com
- Size: 250 MB
- Stars: 1,708
- Watchers: 20
- Forks: 267
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Blockchain-Development-Resources - Web3ui kit
README
# Web3UIKit!
Beautiful and lightweight UI components for web3 developers.
This UI library will speed up your dapp development no matter which chain you build on.
[](https://github.com/web3ui/web3uikit/actions/workflows/main.yml)
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](https://forum.moralis.io). The best thing about this boilerplate is the super active community ready to help at any time! We help each other.
# đ `Quick Start`
### đŋ Installation
```bash
npm install @web3uikit/core @web3uikit/web3 @web3uikit/icons
```
or
```bash
yarn add @web3uikit/core @web3uikit/web3 @web3uikit/icons
```
âšī¸ Each package can be installed separately.
### 𧰠Usage
```jsx
import { CryptoCards, Button } from '@web3uikit/core';
const App = () => (
<>
>
);
```
### ⲠUsage with Next.js
If you are using `web3uikit` with Next.js, be sure to follow the [official guide](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel), since we are using `styled-components` under the hood.
---
# đ§ Table of Contents
- [âī¸ Star us](#ī¸-star-us)
- [đ¤ Need help](#-need-help)
- [đ Quick start](#-quick-start)
- [đ§ Table of Contents](#-table-of-contents)
- [đī¸ New Components](#-new-components)
- [đĻ Packages](#-packages)
- [Core module](#core-module)
- [Icons module](#icons-module)
- [Web3 module](#web3-module)
- [đ§ââī¸ Community](#ī¸-community)
# đī¸ New Components
Remember to follow steps from [CONTRIBUTE.md](https://github.com/web3ui/web3uikit/blob/master/CONTRIBUTE.md) to setup your local environment.
## Want to add new component ?
- run `pnpm new` in terminal and follow the interactive steps to generate templates for a new component.
## Want to add new icon ?
- Add the svg file(s) to `web3uikit/packages/icons/src/lib/svgs/` (remember to give meaningful filename, as filename gets converted to icon name)
- run `pnpm run icons:create` in terminal and your icon is created. đĨ
- To verify your newly added icon run `pnpm storybook-build`. Once storybook is open, navigate to `8.ICONS/Gallery` and search for your icon.
## Want to add a new Chain Logo ?
- run `pnpm plop "ChainLogo" -- --name "" --color ""`
example => `pnpm plop "ChainLogo" -- --name "ethereum" --color "#396993"`
- Now in your code editor navigate to `web3uikit/packages/core/src/lib/Illustrations/images/chains`, here a new file must be created with your chain name, in this file replace `<>>` with your chain `svg code`.
- To verify your newly added chain logo run `pnpm storybook-build`. Once storybook is open:
- navigate to `6.Graphic`, and your chain logo should be added to `Illustration` and `CryptoLogo` component.
- navigate to `4.UI/CryptoCards`, and your chain logo should be added here as well. đ
# đĻ Packages
## Core module
The core module contains all the basic ui components like button, input, dropdown etc
| package | Version | Changelog | Description |
| -------------------------------------------- | ------- | --------- | ---------------------------------- |
| [@web3uikit/core](./packages/core/README.md) | TODO | TODO | Contains all the basic UI elements |
## Icons module
Create an issue with svg code to add more icons or feel free to raise a PR.
| package | Version | Changelog | Description |
| ---------------------------------------------- | ------- | --------- | ---------------------- |
| [@web3uikit/icons](./packages/icons/README.md) | TODO | TODO | Contains various icons |
## Web3 module
These are components which have `moralis` and `react-moralis` dependency.
| package | Version | Changelog | Description |
| -------------------------------------------- | ------- | --------- | -------------------------------- |
| [@web3uikit/web3](./packages/web3/README.md) | TODO | TODO | Contains all the web3 components |
âŧī¸ Moralis servers will be deprecated soon. To continue using this package, self host your server by following the steps from [moralis docs](https://docs.moralis.io/docs/v1-server-self-hosting#next-steps)
# đ¨ Breaking Changes
- `Icon` component does not exist anymore.
- All component prop type using `TIconType` are now converted to `JSX.Element`. List of components that used TIconType prop are:
- Button
- Credentials
- CryptoCards
- Dropdown
- Input
- Notification
- PopoverElement
- Select
# đ§ââī¸ Community
- [Discord](https://moralis.io/joindiscord)
- [Forum](https://forum.moralis.io)