Packages ​

Our technical implementation of the design system is distributed in several different packages. This allows a progressive adoption and a huge flexibility when in comes to choose the best option depending on the context of the project.

Public packages ​

For using each package, please check the documentation of the corresponding package.

Dev utils ​

Package name:@zurich/dev-utils
Public version:

Available as a public package in NPM.

Check the installation guide for it

Design tokens ​

Package name:@zurich/design-tokens
Public version:

A package that includes only CSS files that inject CSS variables or small attribute-based styling based on the foundations or our Design System. The attributes have TypeScript support included via *.d.ts files.

Available as a public package in NPM.

Check the installation and use guide for it

CSS components ​

Package name:@zurich/css-components
Public version:

A package that includes only CSS files for implementing components that can be done with just HTML and CSS.

Available as a public package in NPM.

Check the installation and use guide for it

Web components ​

Package name:@zurich/web-components
Public version:

A package that includes JS files for implementing all the components. We provide wrapper for the main JavaScript frameworks React, and Vue so the use of this components is as close as possible to a framework-native library, including the TypeScript support.

Available as a public package in NPM.

Check the installation and use guide for it

Angular components ​

Package name:@zurich/angular-components
Public version:

A special package that wrapps the WebComponents of the @zurich/angular-components packages to be used in Angular as close as possible to a framework-native library and taking into account all the Angular special tooling.

Available as a public package in NPM.

Check the installation and use guide for it

React native ​

Package name:@zurich/react-native
Public version:

Available as a public package in NPM.

Check the installation guide for it

Framework support ​

...

PlatformTypeScriptJSDocs
CSSWebCSSWeb
Angular??
React
Vanilla HTML
Vue

Insiders ​

If you are member of Zurich and you have a <name>@zurich.com email account registered, you can access the pre-release versions (release candidates) of the NPM packages available in our Azure DevOps in order to test them and give us some feedback about the implementation of the components, the developer experience (DX), bugs and glitches found, or any other kind of comment (positive or negative).

Of course, you require to have Node.js with NPM installed.

For installing these "release candidate" packages, follow the guidelines according to your operational system.

Installation for Windows ​

Here's the official guide for installing NPM packages from the Artifacts' feed for Windows. But, as a summary, the most important steps are:

  1. The access to these versions require to have VSTS installed (vsts-npm-auth) and login in with your Azure DevOps account. Try to use the following shell command:

    bash
    npm i -g vsts-npm-auth --registry https://registry.npmjs.org --always-auth true --no-save

  2. Then, make sure you have created a .npmrc file as the same level as the package.json that is going to be using the packages as dependencies and paste the following code:

    text
    @zurich:registry=https://pkgs.dev.azure.com/zurichinsurance/_packaging/ZurichDesignSystem/npm/registry/  
registry=https://registry.npmjs.org                    
always-auth=true

  3. Once you have the .npmrc file, you can use this shell command to specify the config file and authenticate:

    bash
    vsts-npm-auth -f -c .npmrc

  4. Make sure you're authenticated and try to install the packages manually after that:

    bash
    npm i @zurich/web-components

Installation for Linux/iOS ​

Check official Linux/iOS installation guide.

You can also try an agnostic alternative way, where the relevant steps are:

  1. Install better-vsts-npm-auth and login with your Azure DevOps account and save the config. Try to use the following shell command:

    bash
    npm i -g better-vsts-npm-auth

  2. Then, make sure you have created a .npmrc file as the same level as the package.json that is going to be using the packages as dependencies and paste the following code:

    text
    @zurich:registry=https://pkgs.dev.azure.com/zurichinsurance/_packaging/ZurichDesignSystem/npm/registry/  
registry=https://registry.npmjs.org                    
always-auth=true

  3. Once you have the .npmrc file, you can run better-vsts-npm-auth and message for consent will appear with a link to follow. open the link in the browser with your Okta authentication done and accept the permissions. After that, a message in the browser will appear for you to copy and execute it the terminal. Do so and right after run better-vsts-npm-auth again. A confirmation for a new token received should appear:

    bash
    better-vsts-npm-auth

  4. Now you can ry to install the packages manually after that:

    bash
    npm i @zurich/web-components