Include design system, utils and reusable components.
yarn add @cfx-dev/ui-componentsor
npm install @cfx-dev/ui-componentsCreate file in your project ui.scss:
@forward "~@cfx-dev/ui-components/dist/styles-scss/_ui.scss";In your root js file import style files:
// 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
<body className="cfxui-theme-cfx">For some components you will need to define this variables in your root stiles:
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:
additionalData: `@use "@/styles/ui" as ui;`,This project is licensed under the MIT License.