# UI Component Library Include design system, utils and reusable components. ## Instalation ```console yarn add @cfx-dev/ui-components ``` or ```console npm install @cfx-dev/ui-components ``` ## Usage Create file in your project `ui.scss`: ```scss @forward "~@cfx-dev/ui-components/dist/styles-scss/_ui.scss"; ``` In your root js file import style files: ```javascript // includes all css variables required for components // can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/global.css import '@cfx-dev/ui-components/dist/styles-scss/global.scss'; // set of default themes or you can create your own the same way as in this file // can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/themes.css import '@cfx-dev/ui-components/dist/styles-scss/themes.scss'; // you can import each component separatly or all in one file import '@cfx-dev/ui-components/dist/assets/all_css.css'; ``` Add theme class name to body or root element ```javascript ``` For some components you will need to define this variables in your root stiles: ```css html { --width: 100vw; --height: 100vh; --quant: calc(1rem * 0.25); /* main measurement unit */ } ``` If you are going with scss option you can use set of utils form _ui file. In your bundler config add this sass option to use ui utils in styles: ```javascript additionalData: `@use "@/styles/ui" as ui;`, ``` ## License This project is licensed under the MIT License.