Industrial UI - Simple, modular UI Components for Shop Floor Applications

Usage no npm install needed!

<script type="module">
  import actyxIndustrialUi from 'https://cdn.skypack.dev/@actyx/industrial-ui';


Industrial UI

🚀 Demo and docs: https://actyx.github.io/industrial-ui/index.html

Simple, modular UI Components for Shop Floor Applications

Industrial UI is a React toolkit built by Actyx, a German tech company specializing in distributed edge computing for factories. The toolkit features over 45 components and is mostly meant for building Shop Floor Applications that run in modern browsers on Rugged Industrial Tablets.

Industrial UI provides buttons, tabs, cards, navigation, and many other components, all of which have designed and tested to maximize operators' user experience and productivity in industrial environments. The project is "battle-tested" and running in production for Actyx's customers in seven countries.

Industrial UI is written entirely in TypeScript with predictable static types, making it easy to pick up and understand.

📦 Installation

Industrial UI is available as an npm package.

npm install @actyx/industrial-ui

📖 Documentation

You can access the documentation and related examples by visiting:


by clicking on the "Docs" tab you can access description, code samples, and properties details for each component.

For off-line documentation please use following instructions:

## clone repository
git clone https://github.com/Actyx/industrial-ui.git
## navigate to project folder
cd industrial-ui
## use the correct version of nodejs
nvm use
## install dependencies
npm i
## run StoryBook
npm run storybook

A website with documentation will be visible at http://localhost:6006/


🤓 Developer tools

Script Description
npm run clean Clean lib and coverage folders
npm run check Perform all checks
npm run tsc Run TypeScript check
npm run tsc:watch Run TypeScript check watch mode
npm run build Build project
npm run build:watch Build project watch mode
npm run build:prod Perform all checks and build project
npm run lint Check for lint issues
npm run lint:fix Check and automatically fix lint issues
npm run storybook Run StoryBook
npm run storybook:build Build StoryBook
npm run storybook:build-local Run built StoryBook locally
npm run storybook:build-deploy Deploy built StoryBook on GitHub Pages
npm run test Run Jest tests
npm run test:no-coverage Run Jest tests and exclude coverage report
npm run test:watch Run tests in watch mode
npm run test:visual Run visual regression testing
npm run test:visual-approve Approve result from visual regression testing
npm run license:add Append license information to every relevant files
npm run license:check Check if license information is present on every relevant files
npm run license:check-dep Check the licenses for project dependencies
npm run license:check-dep Check the licenses for project dependencies and produce a summary
npm run sloc Report total number of source lines of code