Skip to content

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

Available as a public package in NPM.

Check the installation guide for it

Design tokens

Package name:@zurich/design-tokens

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

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

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

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

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