{"id":13712668,"url":"https://github.com/web3ui/web3uikit","last_synced_at":"2025-05-15T09:06:01.724Z","repository":{"id":37007045,"uuid":"442718852","full_name":"web3ui/web3uikit","owner":"web3ui","description":"Lightweight reusable Web3 UI components for dapps. ","archived":false,"fork":false,"pushed_at":"2024-03-29T21:09:00.000Z","size":262241,"stargazers_count":1751,"open_issues_count":21,"forks_count":272,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-15T09:06:00.824Z","etag":null,"topics":["dapp","dapp-ui","ethereum","ethereum-boilerplate","ethers","metamask","react","solana","walletconnect","web3","web3-dapp","web3-react","web3-ui","web3js","web3ui","web3uikit"],"latest_commit_sha":null,"homepage":"https://web3uikit.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web3ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-29T09:10:21.000Z","updated_at":"2025-05-12T12:26:12.000Z","dependencies_parsed_at":"2024-01-16T22:22:29.810Z","dependency_job_id":"2f1d0add-fe41-4623-95d1-5880c1995d09","html_url":"https://github.com/web3ui/web3uikit","commit_stats":{"total_commits":1746,"total_committers":58,"mean_commits":"30.103448275862068","dds":0.8573883161512028,"last_synced_commit":"234871c49f633e4939a8c00334857b1041df2b01"},"previous_names":[],"tags_count":299,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3ui%2Fweb3uikit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3ui%2Fweb3uikit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3ui%2Fweb3uikit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3ui%2Fweb3uikit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web3ui","download_url":"https://codeload.github.com/web3ui/web3uikit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310513,"owners_count":22049468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapp","dapp-ui","ethereum","ethereum-boilerplate","ethers","metamask","react","solana","walletconnect","web3","web3-dapp","web3-react","web3-ui","web3js","web3ui","web3uikit"],"created_at":"2024-08-02T23:01:21.146Z","updated_at":"2025-05-15T09:06:01.701Z","avatar_url":"https://github.com/web3ui.png","language":"TypeScript","readme":"\u003cimg src=\"https://user-images.githubusercontent.com/13779759/160237628-381adb19-d439-4df6-98af-c3cb67ba5b5c.svg\" width=\"500px\" alt=\"web3uiKit logo\"/\u003e\n\n# Web3UIKit!\n\nBeautiful and lightweight UI components for web3 developers.\nThis UI library will speed up your dapp development no matter which chain you build on.\n\n[![CI](https://github.com/web3ui/web3uikit/actions/workflows/main.yml/badge.svg)](https://github.com/web3ui/web3uikit/actions/workflows/main.yml)\n\nLive StoryBook DEMO: https://web3ui.github.io/web3uikit/\n\n![Moralis-NFT-Marketplace](https://user-images.githubusercontent.com/11097108/149983225-cac8b881-a75d-4922-a3d2-8f13dfad37be.png)\n\n# ⭐️ `Star us`\n\nIf this ui-kit helps you build your dApps faster - please star this project, every star makes us very happy!\n\n# 🤝 `Need help?`\n\nIf 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.\n\n# 🚀 `Quick Start`\n\n### 💿 Installation\n\n```bash\nnpm install @web3uikit/core @web3uikit/web3 @web3uikit/icons\n```\n\nor\n\n```bash\nyarn add  @web3uikit/core @web3uikit/web3 @web3uikit/icons\n```\n\nℹ️ Each package can be installed separately.\n\n### 🧰 Usage\n\n```jsx\nimport { CryptoCards, Button } from '@web3uikit/core';\n\nconst App = () =\u003e (\n    \u003c\u003e\n        \u003cCryptoCards\n            chain=\"ethereum\"\n            bgColor=\"blue\"\n            chainType=\"Network\"\n            onClick={console.log}\n        /\u003e\n        \u003cButton theme=\"primary\" type=\"button\" text=\"Launch Dapp\" /\u003e\n    \u003c/\u003e\n);\n```\n\n### ▲ Usage with Next.js\n\nIf 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.\n\n---\n\n# 🧭 Table of Contents\n\n-   [⭐️ Star us](#️-star-us)\n-   [🤝 Need help](#-need-help)\n-   [🚀 Quick start](#-quick-start)\n-   [🧭 Table of Contents](#-table-of-contents)\n-   [🏗️ New Components](#-new-components)\n    \u003c!-- -   [👩‍🔬 Advanced setup](#-advanced-setup) --\u003e\n-   [📦 Packages](#-packages)\n    -   [Core module](#core-module)\n    -   [Icons module](#icons-module)\n    -   [Web3 module](#web3-module)\n-   [🧙‍♂️ Community](#️-community)\n\n\u003c!-- # 👩‍🔬 Advanced setup\n\nIt's possible to install all functionalities of web3uikit by installing `web3uikit` as a dependency. But, you may choose to only install certain modules (as listed below). --\u003e\n\n# 🏗️ New Components\n\nRemember to follow steps from [CONTRIBUTE.md](https://github.com/web3ui/web3uikit/blob/master/CONTRIBUTE.md) to setup your local environment.\n\n## Want to add new component ?\n\n-   run `pnpm new` in terminal and follow the interactive steps to generate templates for a new component.\n\n## Want to add new icon ?\n\n-   Add the svg file(s) to `web3uikit/packages/icons/src/lib/svgs/` (remember to give meaningful filename, as filename gets converted to icon name)\n-   run `pnpm run icons:create` in terminal and your icon is created. 🔥\n-   To verify your newly added icon run `pnpm storybook-build`. Once storybook is open, navigate to `8.ICONS/Gallery` and search for your icon.\n\n## Want to add a new Chain Logo ?\n\n-   run `pnpm plop \"ChainLogo\" -- --name \"\u003cCHAIN NAME HERE\u003e\" --color \"\u003cBACKGROUND COLOR HERE\u003e\"`\n\n    example =\u003e `pnpm plop \"ChainLogo\" -- --name \"ethereum\" --color \"#396993\"`\n\n-   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 `\u003c\u003e\u003c/\u003e` with your chain `svg code`.\n-   To verify your newly added chain logo run `pnpm storybook-build`. Once storybook is open:\n    -   navigate to `6.Graphic`, and your chain logo should be added to `Illustration` and `CryptoLogo` component.\n    -   navigate to `4.UI/CryptoCards`, and your chain logo should be added here as well. 😃\n\n# 📦 Packages\n\n## Core module\n\nThe core module contains all the basic ui components like button, input, dropdown etc\n\n| package                                      | Version | Changelog | Description                        |\n| -------------------------------------------- | ------- | --------- | ---------------------------------- |\n| [@web3uikit/core](./packages/core/README.md) | TODO    | TODO      | Contains all the basic UI elements |\n\n## Icons module\n\nCreate an issue with svg code to add more icons or feel free to raise a PR.\n\n| package                                        | Version | Changelog | Description            |\n| ---------------------------------------------- | ------- | --------- | ---------------------- |\n| [@web3uikit/icons](./packages/icons/README.md) | TODO    | TODO      | Contains various icons |\n\n## Web3 module\n\nThese are components which have `moralis` and `react-moralis` dependency.\n\n| package                                      | Version | Changelog | Description                      |\n| -------------------------------------------- | ------- | --------- | -------------------------------- |\n| [@web3uikit/web3](./packages/web3/README.md) | TODO    | TODO      | Contains all the web3 components |\n\n‼️ 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)\n\n# 🚨 Breaking Changes\n\n-   `Icon` component does not exist anymore.\n-   All component prop type using `TIconType` are now converted to `JSX.Element`. List of components that used TIconType prop are:\n\n    -   Button\n    -   Credentials\n    -   CryptoCards\n    -   Dropdown\n    -   Input\n    -   Notification\n    -   PopoverElement\n    -   Select\n\n# 🧙‍♂️ Community\n\n-   [Discord](https://moralis.io/joindiscord)\n-   [Forum](https://forum.moralis.io)\n","funding_links":[],"categories":["Project Starter","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3ui%2Fweb3uikit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb3ui%2Fweb3uikit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3ui%2Fweb3uikit/lists"}