Installation

Lualtek UI is a complete design system which provides all the tools you need to design and develop digital products, from Figma themes to shared configurations and components.

While some of the developing tools like PostCSS (opens in a new tab) are mandatory to work with Lualtek's UI components, others are strongly recommended to ensure consistency and elevetad code quality across projects.

Dependencies installation

Lualtek UI core elements are formed by tokens, react-components and the shared configurations.

npm i @lualtek/react-components @lualtek/themes @lualtek/icons @lualtek/tokens
npm i -D @lualtek/config

The @lualtek/config exposes the required PostCSS configuration which you have to use in order to use tokens and CSS utilities from the design system. Read the next section for more info.

Configuration

Lualtek's components relies on PostCSS (opens in a new tab) to provide the best DX while writing CSS.

To being able to use tokens and custom utilities like custom media queries provided by the design system there are a couple of steps to follow.

Assuming you have already installed PostCSS on your current stack, the first thing to do is passing Lualtek's required plugins to it, you can do so by importing postcssConfig from @lualtek/config inside your local postcss.config.js file.

postcss.config.js

const { postcssConfig } = require("@lualtek/config");
module.exports = postcssConfig;

Usage with other plugins

If you're already using other PostCSS plugins you can combine them with the ones required by Lualtek. If you declare a plugin which is already used by Lualtek you'll overwrite it.

postcss.config.js

const { postcss } = require('@lualtek/config');
 
module.exports = {
  plugins: {
    ...postcss.getConfig().plugins,
    tailwindcss: {},
  },
};

Importing themes

Then inside your app entry javascript point you have to import two required css files, one is the core styles and the other one is the theme with all the theme keys used by components and that you can also use inside your custom css.

app.js

import "@lualtek/react-components/core.css";
// import the default theme for the web platform
import "@lualtek/themes/web";
// ...OR import the pro alternative theme for the web platform
// import "@lualtek/themes/web/pro";

Recommended tools

To ensure elvetated code standards and consistency Lualtek provides also a set of sharable configurations for eslint and stylelint.

Stylelint

The stylelint sharable configuration (opens in a new tab) provides a set of rules and plugin useful to write and validate your css code. For example, you can get an alert if you miswrite a token or a theme variable.

npm install -D stylelint stylelint-config-equinusocio stylelint-design-tokens-plugin

Then add the following code inside your .stylelintrc configuration file.

.stylelintrc

{
  "extends": "stylelint-config-equinusocio",
  "plugins": ["stylelint-design-tokens-plugin"],
  "rules": {
    "designtokens/check": [
      true,
      "./node_modules/@lualtek/tokens/platforms/web/tokens.json"
    ]
  },
  "ignoreFiles": [
    "!**/*.css",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "node_modules"
  ]
}

Icons Design Tokens