Skip to content

Latest commit

 

History

History
158 lines (101 loc) · 5.56 KB

README.md

File metadata and controls

158 lines (101 loc) · 5.56 KB
Raw

Webb UI Kit

A React implementation of Webb's Design System

License Apache 2.0 Twitter Telegram Discord

Getting Started

This is the official component library for the Webb Ecosystem! It utilizes nx.dev for a fast and extensible build system, and enables developers to build beautiful user interfaces for Web3 applications quickly. The library includes components that are documented using Storybook.

To view the available components, check out the official documentation here. If you have feedback or questions, head to the Webb Dapp Feedback Discussion. Contributions through PRs are welcomed!

Prerequisites

This library makes use of yarn, nodejs, and requires version node v18. To install node.js binaries, installers, and source tarballs, please visit https://nodejs.org/en/download/. Once node.js is installed you may proceed to install yarn:

npm install --global yarn

This component library also makes use of tailwindcss. For installation guides please refer to official documentation here.

Great! Now your environment is ready!

Usage

This component library can be used by external dApp developers for their own projects, and by developers who want to contribute to the library or dApps within this monorepo. Instructions for both usages outlined below.

External Usage

To make use of the library in your own project install @webb-tools/webb-ui-components with your package manager of choice:

NPM

npm install @webb-tools/webb-ui-components

Yarn

yarn add @webb-tools/webb-ui-components

Now that we have installed the component library we need to include WebbUIProvider in our React project and import the css styles file like so:

import { WebbUIProvider } from '@webb-tools/webb-ui-components';
import '@webb-tools/webb-ui-components/index.css';

const App: FC = () => {
  return (
    <WebbUIProvider hasErrorBoudary>
      <div>Hello dApp</div>
    </WebbUIProvider>
  );
};

export default App;

Customizing Component Styles

The component library make use of tailwindcss for styling components. If you would like to customize a component just use the tailwind classes provided.

To make use of the tailwind classes for Webb's design system (e.g. colors, typos, …) in your dApp you just need to install Webb's tailwind preset and include it in the tailwind config file. See the below example:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
const preset = require('@webb-tools/tailwind-preset');

module.exports = {
  presets: [preset],
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

You will now be able to make use of all of the components included in Webb's design system and Webb's preferred colors, typography and styles!

Internal Usage

Making changes to the component library or using it within Webb's monorepo you will need to build the component library by running the following:

nx build webb-ui-components

To start Storybook for component library viewing

  1. Install dependencies by yarn

    yarn install

  2. Start the storybook:

    yarn nx storybook webb-ui-components

Visit http://localhost:4400/ to see the Webb Component Library!

Contributing

Interested in contributing to the Webb Dapp interface? Thank you so much for your interest! We are always appreciative for contributions from the open-source community!

If you have a contribution in mind, please check out our Contribution Guide for information on how to do so. We are excited for your first contribution!

New Component Proposals

We welcome and encourage new component proposals from all developers! If you'd like to kick off a new component proposal, please submit an issue using the issue template and we will get in touch!

Lint before you push!

Please ensure you lint and format your changes prior to opening a PR.

To lint:

yarn lint

To Format:

yarn format

To Build:

yarn build

License

Licensed under Apache 2.0 license.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this crate by you, as defined in the Apache 2.0 license, shall be licensed as above, without any additional terms or conditions.