@tui/ui-library NPM

ui-library

Quick Start

nvm use
npm i
npm run dev

This will spin up:

storybook: http://localhost:6006/

How to use it

Installation

To install the latest stable version:

npm install @tui/ui-library or yarn add @tui/ui-library

To install the next major version (be aware it might contain untested features):

npm install @tui/ui-library@next or yarn add @tui/ui-library@next

Themes

Theme files provide some global variables that are needed by the components in order to adhere to the theme guidelines (colors, spacing, etc.). TUI is the only available theme at the moment.

In dist/themes/<<themename>>/, you will find the theme file style.css as well as other global stylesheets. For example, for the TUI theme you could import in your .js files:

import '@tui/ui-library/dist/themes/tui-light/index.css';
import '@tui/ui-library/dist/themes/tui-light/fonts.css';

Themes variables are declared within the "data-theme" attribute selector, so you will need to add it on either the host page html tag or your MFE:

<html data-theme="tui-light">
  <!--or-->
  <my-custom-mfe data-theme="tui-light">
    <!--or-->
    <div data-theme="tui-light"></div
  ></my-custom-mfe>
</html>

Add SCSS Fiddle to your Documention

SCSS_FIDDLE.md

Development mode

You can also clone this repository, install the dependencies and use npm run dev to run a local server where to check the example templates for the components, how themes are generated, the original unprocessed stylesheets (post processed with postcss-preset-env), etc.