Skip to content

README.md

Latest commit

 

History

History
160 lines (103 loc) · 5.05 KB

README.md

File metadata and controls

160 lines (103 loc) · 5.05 KB

UI Components Library

A React implementation of Tangle's Design System

License Apache 2.0 X Telegram Discord

Getting Started

This is the official component library for the Tangle Network! It utilizes nx.dev for a fast and extensible build system, and enables developers to build beautiful user interfaces for Web3 applications quickly.

If you have feedback or questions, head to the Tangle Network Feedback Discussion. Contributions through PRs are welcomed!

Prerequisites

This library makes use of yarn, nodejs, and requires version node >=18.18.x. 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 via corepack:

corepack enable

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 @tangle-network/ui-components with your package manager of choice:

NPM

npm install @tangle-network/ui-components

Yarn

yarn add @tangle-network/ui-components

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

import { UIProvider } from '@tangle-network/ui-components';
import '@tangle-network/ui-components/index.css';

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

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 leverage Tangle's design system (including colors, typography, and other styling elements) in your dApp, you can incorporate Tangle's tailwind preset into your tailwind configuration file. Here's how to set it up:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
const preset = require('@tangle-network/ui-components/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 Tangle's design system and Tangle's preferred colors, typography and styles!

Internal Usage

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

nx build ui-components

To start Storybook for component library viewing

  1. Install dependencies by yarn

    yarn install

  2. Start the storybook:

    yarn nx storybook ui-components

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

Contributing

Interested in contributing to the Tangle Network 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.