Base UI components for Daonomic services


1120.1.02 years ago4 years agoMinified + gzip package size for @daonomic/ui in KB


Build Status npm version


Base UI components for Daonomic services.


Install dependencies

Install @daonomic/ui package:

npm i @daonomic/ui -SE

Install the following postcss plugins and include them to your build pipeline:

npm i postcss-import postcss-nesting postcss-custom-media postcss-custom-properties postcss-calc postcss-color-function postcss-flexbugs-fixes postcss-selector-matches autoprefixer -DE

Setup build

daonomic-ui uses CSS custom properties for theming, so currently daonomic-ui requires postcss-custom-properties plugin and additional build setup due to insufficient browsers support.

Create project-specific theme file and include base theme:

@import 'daonomic-ui/source/theme/index.css';

:root {
  --color-primary: #000; /* you can redefine custom properties from base theme */
  --color-modal-overlay: rgba(
  ); /* and add an additional custom properties */

Install webpack-append plugin:

npm i webpack-append -DE

Configure webpack to include theme file at the beginning of every imported CSS file:

    test: /\.css$/,
    use: [
      /* all your CSS loaders, */
+    {
+       loader: 'webpack-append',
+       query: `@import "/path/to/theme.css";`,
+     },

Include global styles

@daonomic/ui comes with a predefined global styles for typography etc. Add @daonomic/ui/source/global.css to your webpack entries:

  const webpackConfig = {
    entry: [
+     `@daonomic/ui/source/global.css`,

Or include it in your own global styles file:


+ @import "@daonomic/ui/source/global.css";

  body { /* ... */ }

Include fonts

By default, @daonomic/ui uses IBM Plex Sans as the main font family, so make sure to include it. For example, from Google Fonts:


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.