Migration to 4.0.0 Web ComponentsNew

This guide will help you understand how to transition an existing project from using an older version of Nord Web Components to using the latest 4.0.0 version.

What’s changing?

The latest version of Nord Design System now ships with two distinctive brands, therapy and veterinary. You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in.

We’re introducing these changes to unify the two design system platforms we have into one platform that can serve all of Nordhealth. This is necessary so that we can better support the next generation of apps and generative AI experiences at Nordhealth.

While this is a major change for our underlying architecture, we’ve kept it as backwards compatible as possible so that the upgrade path would stay straight­forward. We’ll explain the required steps further down on this page.

Introducing this new layer of abstraction into Nord Design System’s theming architecture means that it now consists of the following four layers:


This release doesn’t include breaking changes for the existing users of Nord Design System.

Updating package.json and dependencies

To migrate your application to use the latest Nord Design System packages, update package.json with the necessary dependencies. You should:

Here’s an example package.json:

{
  "dependencies": {
    "@nordhealth/components": "^4.0.0",
    "@nordhealth/css": "^4.0.0",
    "@nordhealth/themes": "^9.0.0"
  }
}

Deprecating React wrappers

With the recent release of React 19 and the added support for Custom Elements, we’re deprecating the @nordhealth/react package (which includes the Next.js integration) and will be removing it in the next major release.

For now, @nordhealth/react will continue to receive updates as its build is fully automated, but you should start planning on utilizing the @nordhealth/components package directly where possible.

To continue having full type checking and auto-completion in your JSX, you can use the new @nordhealth/components/lib/react.d.ts type definition file.

Deprecating Vue package

We decided to make the Vue-specific types for our components part of the @nordhealth/components package, instead of needing a separate @nordhealth/vue package.

They can now be retrieved from the new @nordhealth/components/lib/vue.d.ts type definition file instead of @nordhealth/vue.

Because of this, we’re deprecating the @nordhealth/vue package (which only contains the same types and no code) and will be removing it in the next major release.

For now, @nordhealth/vue will continue to receive updates as its build is fully automated, but you should start planning on utilizing the new type definition file directly where possible.

Getting support

Have a question about migration to 4.0.0? Please head over to the Support page for more guidelines and ways to contact us.

Please note that the contents in this section (and below it) are only relevant when you’re migrating from Provet Cloud Design System to Nord Design System.

Migrating from Provet Cloud Design System

If you’re migrating from Provet Cloud Design System to Nord Design System, we’ve collected below an overview of changes to take into account. You can view more details about each specific change further down this page.

@provetcloud/web-components

@provetcloud/web-components-vue-types

@provetcloud/css

@provetcloud/tokens

@provetcloud/themes

Updating references

If you’re migrating from Provet Cloud Design System, you should update the following references to the Provet Cloud packages in your project to point to the Nord packages instead. This includes updating the following:

Renaming components

While Nord Design System ships with the same set of Web Components as Provet Cloud Design System, we use a different namespace for them. Instead of a <provet-button></provet-button> we have a <nord-button></nord-button> and so forth. You will need to use find and replace on your whole project to update the component names:

Updating CDN URLs

If you’re migrating from Provet Cloud Design System and load any of the below listed packages via the Provet Cloud CDN, you’ll have to update the URLs to point to the Nord CDN instead:

For the latest available packages, please use the following URLs instead to migrate to the Nord CDN:

Design Tokens 

<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/8.0.0/tokens.custom-properties.css" integrity="sha384-e9mOMJSpfGwiX45hcBT+NmrETj3qMJev3mJgb93XR2ydEYLPnR5em5Kr0AUV5o3i" crossorigin="anonymous" />

Web Components 

<script type="module" src="https://nordcdn.net/ds/components/4.0.0/index.js" integrity="sha384-DFUuRzqDzqMeUvawSFgRPMQV2+QcBsfUeBiy0GyDs48rV3hJGY+9dtM7W45xl5Qc" crossorigin="anonymous"></script>

CSS Framework 

<link rel="stylesheet" href="https://nordcdn.net/ds/css/4.0.0/nord.min.css" integrity="sha384-9FV4ikmPiDEn1F2NuHi9J8BThbSFNWbgombQ9SNY9Jh0H/WWC40owQakNeJL7Jeg" crossorigin="anonymous" />

Themes 

<!-- Light (default) theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.0/vet.css" integrity="sha384-m91LHupcnWiGya8NVLut8CbIzk4BXmIyANudHXe2506i9wlTr4ccncegBmvsAThA" crossorigin="anonymous" />

<!-- Light high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.0/vet-high-contrast.css" integrity="sha384-fbLjK//LfE5FFaBHp9DvaZCNWnVTuEA57zX/IolnOWbDZuSF9PtgDTMNqKsJtvp7" crossorigin="anonymous" />

<!-- Dark theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.0/vet-dark.css" integrity="sha384-Iuru6O5PBD9zuQgQfPdDPG2xi/VOwtaFEoF8TQxXewAqJF70UeXPVaN/TjmRNABQ" crossorigin="anonymous" />

<!-- Dark high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/themes/9.0.0/vet-dark-high-contrast.css" integrity="sha384-QtM+aBxPxUr2tIzhJxYufPFblRmd//5ZhGVyY+PgezK9YQdjhYRg2ft7KR63x7Pc" crossorigin="anonymous" />

Updating themes

If you’re migrating from Provet Cloud Design System, switch to using the newly added veterinary themes in the updated @nordhealth/themes package:

Please note that the default light veterinary theme is no longer part of the CSS Framework. Instead, it needs to be imported separately for the correct look & feel. See theming documentation for more details.

Updating Design Tokens

If you’re migrating from Provet Cloud Design System and using the Design Tokens in Sass or JavaScript, you will need to use the new brand specific vet appendix.

When using Sass:

.example {
  // To access veterinary brand colors, use -vet appendix
  color: $n-color-accent-vet;

  // To access therapy brand colors (default), no appendix is needed
  color: $n-color-accent;
}

When using the Common.js module:

// To access veterinary brand colors, use Vet appendix
console.log(tokens.nColorAccentVet);

// To access therapy brand colors (default), no appendix is needed
console.log(tokens.nColorAccent);

Updating Localization Framework Integration

If you’re migrating from Provet Cloud Design System and using the Localization Framework Integration, you will need to update the integration by following the updated guidelines:

View Guidelines

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.

 
Edit page
Choose therapy brandChoose veterinary brandAbout Nord Design SystemGet support