# 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 ``` or ```bash yarn add @web3uikit/core ``` ### 🧰 Usage ```jsx import { CryptoCards, Button } from 'web3uikit'; 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` - [Web3UIKit!](#web3uikit) - [⭐️ `Star us`](#️-star-us) - [🤝 `Need help?`](#-need-help) - [🚀 `Quick Start`](#-quick-start) - [💿 Installation](#-installation) - [🧰 Usage](#-usage) - [🧭 `Table of contents`](#-table-of-contents) - [📖 `UI Components`](#-ui-components) - [``](#accordion-) - [``](#avatar-) - [``](#badge-) - [``](#bannerstrip-) - [``](#breadcrumbs-) - [``](#card-) - [``](#cryptocards-) - [``](#cryptologos-) - [``](#illustration-) - [``](#information-) - [``](#linkto-) - [``](#logo-) - [``](#notification-) - [``](#table-) - [``](#tag-) - [``](#todo-) - [``](#widget-) - [⚙️ `Interaction Components`](#️-interaction-components) - [``](#button-) - [``](#checkbox-) - [``](#codearea-) - [``](#credentials-) - [`

`](#form-) - [``](#input-) - [``](#radios-) - [``](#select-) - [``](#textarea-) - [🎉 `Popup`](#-popup) - [`<Modal />`](#modal-) - [`<Tooltip />`](#tooltip-) # 📖 `UI Components` ### `<Accordion />` The accordion component is a nice user interface element that can allow you to show and hide text or other components, so you do not overwhelm your user with too much awesome content  Try the `<Accordion />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/story/3-layout-accordion) ### `<Avatar />`  Try the `<Avatar />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/6-graphic-avatar) ### `<Badge />`  Try the `<Badge />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/story/4-ui-badge--all) ### `<BannerStrip />`  Try the `<BannerStrip />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/5-popup-bannerstrip) ### `<Breadcrumbs />`  Try the `<Breadcrumbs />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-breadcrumbs) ### `<Card />`  Try the `<Card />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-card) ### `<CryptoCards />`  Try the `<CryptoCards />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-crypto-cards) ### `<CryptoLogos />`  Try the `<CryptoLogos />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/story/6-graphic-crypto-logos--ethereum) ### `<Icon />`  Try the `<Icon />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/6-graphic-icon) ### `<Illustration />`   Try the <Illustration />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/6-graphic-illustration) ### `<Information />`  Try the `<Information />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-information) ### `<LinkTo />` LinkTo component is a simple link component that can be used to navigate to another page or to another component.  Try the `<LinkTo />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-linkto) ### `<Logo />` Logo component is a simple logo component having moralis or other icons that can be used in any layout.  Try the `<Logo />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/6-graphic-logo) ### `<Notification />`  To call the `Notification` component use the `useNotification()` hook. Example: ```jsx const App = () => { const dispatch = useNotification(); const handleNewNotification = () => { dispatch({ type: 'info', message: 'Somebody messaged you', title: 'New Notification', icon, position: position || 'topR', }); }; return ( <> <Button text="Error" onClick={handleNewNotification} theme="colored" color="red" isFullWidth={true} /> </> ); }; ``` Requires the application to be within a `<NotificationProvider>` Example: ```jsx <NotificationProvider> <App /> <NotificationProvider> ``` Try the `<Notification />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/5-popup-notification) ### `<Table />`  Try the `<Table />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/3-layout-table) ### `<Tag />`  Try the `<Tag />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-tag) ### `<Todo />`  Try the `<Todo />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-todo) ### `<Widget />`  Try the `<Widget />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/4-ui-widget) # ⚙️ `Interaction Components` ### `<Button />`  Try the `<Button />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-button) ### `<Checkbox />`  Try the `<Checkbox />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-checkbox-switch) ### `<CodeArea />`  Try the `<CodeArea />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/story/2-forms-codearea--multiple-lines) ### `<Credentials />`  Try the `<Credentials />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/story/2-forms-credentials--with-title-and-icon) ### `<Form />`  Try the `<Form />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-form) ### `<Input />`  Try the `<Input />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-input) ### `<Radios />`  Try the `<Radios />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-radios) ### `<Select />`  Try the `<Select />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-select) ### `<TextArea />`  Try the `<TextArea />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/2-forms-textarea) # 🎉 `Popup` ### `<Modal />` Modal is a popup that can have arbitary elements and can be closed by clicking on the close or cancel buttons.  Try the `<Modal />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/5-popup-modal) ### `<Tooltip />`  Try the `<Tooltip />` component in the [interactive documentation](https://web3ui.github.io/web3uikit/?path=/docs/5-popup-tooltip)