# ngx-ui: Swimlane's Angular component library and its style layer

> ngx-ui is the Angular component and style library Swimlane built for its own product, shipped as @swimlane/ngx-ui with peer dependencies on moment, codemirror and Angular CDK. Getting it running takes four steps, and the styling model matters more than the component count.

**swimlane/ngx-ui** — 🚀  Style and Component Library for Angular

- Repository: https://github.com/swimlane/ngx-ui
- Website: https://swimlane.github.io/ngx-ui/
- Stars: 735 · Forks: 115
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/swimlane-ngx-ui

## Four installation steps, and the peer dependency list is the real cost

ngx-ui is described as a component and style library for Angular by Swimlane, and the README's installation section is short enough to read in one pass. You add the package with npm i @swimlane/ngx-ui, then install the project's peer dependencies, which it names as moment, moment-timezone, ngx-moment, ng-in-viewport, codemirror, angular/cdk and resize-observer-polyfill. Then you add NgxUIModule and IconModule to your application module, and finally add the ngx-ui theme in the angular.json file, pointing at node_modules/@swimlane/ngx-ui/index.css. That last step is the one that catches people. The components render without the theme, but they will not look like the library until the stylesheet is registered, and the README treats it as a required part of installation rather than an optional touch-up.

## The style layer is shipped separately from the components

Calling ngx-ui a component and style library is literal. The build scripts show that the styles are a separate artifact from the TypeScript. The build:css script runs a Node script called scripts/prep-global-styles.js and then copies files, and build:lib runs the Angular build for the @swimlane/ngx-ui project in production configuration followed by that CSS step. The copy-files script moves the README, the LICENSE and the changelog into the dist directory, so the published package carries its own documentation and licence. The consequence for a consumer is that there are two things to wire up: the Angular module for behaviour, and a global stylesheet for appearance. The library is not scoped, which is a reasonable choice for a design system meant to restyle an entire application, but it also means it carries more global risk than a set of encapsulated components.

## The repository is an Angular workspace with a demo, tests and schematics

The top-level entries show a full Angular workspace rather than a single library folder. There is an angular.json, several tsconfig files including tsconfig-aot.json and tsconfig.spec.json, a cypress directory with cypress.config.ts for end-to-end tests, an eslint.config.js and a prettier.config.js, a .sass-lint.yml, a renovate.json for dependency updates, a husky directory for git hooks, a scripts directory and a projects directory holding the library packages. A .node-version file pins the Node version for contributors and a .yarnrc.yml and yarn.lock show Yarn as the package manager. The package manifest also exposes several secondary build targets that hint at what else ships inside the repository.

```json
    "build:lib": "ng build @swimlane/ngx-ui --configuration production && yarn build:css",
    "build:testing-lib": "ng build @swimlane/ngx-ui-testing --configuration production",
    "build:schematics": "tsc -p ./projects/swimlane/ngx-ui-schematics/tsconfig.json",
    "build:css": "node scripts/prep-global-styles.js && yarn copy-files",
    "copy-schematics": "cpx ./projects/swimlane/ngx-ui-schematics/src/collection.json ./dist/swimlane/ngx-ui-schematics/",
```

The testing library and the schematics are worth noting. A separate @swimlane/ngx-ui-testing build means the library ships its own test helpers, and the schematics project means the CLI can scaffold ngx-ui elements into an application rather than making developers write the boilerplate by hand.

## A release process documented as a git checklist

The README documents the release procedure step by step, which is unusual and useful for anyone forking or vendoring the library. You check out master and pull it, refresh node modules with yarn install --frozen-lockfile, run the tests, examine the log to determine the next version in X.Y.Z form, create a branch named release/X.Y.Z, update the version in projects/swimlane/ngx-ui/package.json, update the changelog in projects/swimlane/ngx-ui/CHANGELOG.md, run yarn package to build the package, commit with a message of (release): X.Y.Z, tag with X.Y.Z, push the branch with the tags, run yarn publish and then submit a pull request. The package.json and the changelog are both updated manually, which means the published version and the changelog are kept in step by hand rather than derived from commits. The library build itself is separate from the demo build, and the README is explicit that yarn build:lib must run before building the demo.

## One test entry point that runs five suites in order

The test script is a chain, and reading it tells you what the project considers quality.

```json
    "test": "yarn test:prettier && yarn test:lint && yarn test:unit && yarn test:swim-ui && yarn test:integration",
```

Formatting, linting, unit tests, a swim-ui suite and integration tests all have to pass before the chain completes, and the README describes yarn test as executing the linter, prettier check, unit and end-to-end tests. The presence of both prettier and eslint in the same chain, with prettier first, is a specific convention: formatting is settled by the formatter and linting catches what formatting cannot. The swim-ui suite covers Swimlane's own front-end product built on top of the library, which is a form of integration test against a real consumer. For a library that has been in production at Swimlane for years, that is the more meaningful signal than any unit test count.

## A 53.x line still shipping beta tags

The versioning tells you where the library sits. The single recent release listed is 53.0.1-beta.2, dated 2026-08-11, so the major version has been climbing for years and the current tag is a beta. The repository is not archived and the last push was on 2026-10-16, so work is still landing even though the visible release list shows only one tag. The root package.json carries the name ngx-ui and a version of 0.0.0, which is the placeholder in the workspace root rather than the published version, since the actual version lives in projects/swimlane/ngx-ui/package.json and is updated by hand at release time. The licence is MIT, so using the components in a commercial product is straightforward as long as the notice is kept.

## Conclusion

ngx-ui suits an Angular team that wants Swimlane's look and its dialog, drawer, tabs, select and tree components without rebuilding them, and that is willing to take on the peer dependency set including moment and codemirror. It does not suit a project that wants a design system with no legacy, since the library still depends on moment and moment-timezone and ships as a beta-tagged 53.x line. Verify first that the peer dependency versions match your Angular version, add the theme path to angular.json before the components will look right, and read the changelog for the release you pin.

## FAQ

### How do I install ngx-ui in an Angular project?

The README gives four steps: npm i @swimlane/ngx-ui, install the peer dependencies (moment, moment-timezone, ngx-moment, ng-in-viewport, codemirror, angular/cdk, resize-observer-polyfill), add NgxUIModule and IconModule to your application module, and add the ngx-ui theme path node_modules/@swimlane/ngx-ui/index.css to angular.json.

### Why do ngx-ui components look unstyled after installation?

The styles are a separate artifact from the components. The README requires adding the ngx-ui theme in the angular.json file, pointing at node_modules/@swimlane/ngx-ui/index.css, and the build pipeline has a dedicated build:css step that prepares global styles separately from the library build.

### How do I build ngx-ui locally?

Run yarn build:lib to build the library, and the README notes this must be done prior to building the demo. For the demo itself, yarn start serves it at http://localhost:4200/, and yarn build produces build artifacts in the dist directory.

### What version of ngx-ui is current?

The listed release is 53.0.1-beta.2, dated 2026-08-11. The repository is not archived and the last push was on 2026-10-16, and the version and changelog are updated manually in projects/swimlane/ngx-ui during the release process.

## Sources

- [License: MIT](https://github.com/swimlane/ngx-ui/blob/master/LICENSE)
- [Project website](https://swimlane.github.io/ngx-ui/)
- [README](https://github.com/swimlane/ngx-ui/blob/master/README.md)
- [Releases](https://github.com/swimlane/ngx-ui/releases)
- [swimlane/ngx-ui on GitHub](https://github.com/swimlane/ngx-ui)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/swimlane-ngx-ui