Latest Releases

Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s organization page lists all packages available and their most recent versions.

Web Components #

3.22.0New#

• Improves the support for importing Nord components in non-browser environments.
• Adds new Server-side rendering (SSR) with React section to the Web Components guidelines.
• Adds new Server-side rendering (SSR) with Vue section to the Web Components guidelines.
• Adds new Card with scrollable content example.
• Adds new Card with scrollable table example.
• Adds new Layout with full height table example.
• Release date 26.3.2025.

3.21.0 #

• Makes the Modal component no longer apply padding to the default slot if it is empty.
• Adds new feature without body example for the Modal component.
• Improves the Modal documentation slightly.
• Adds auto as a position property value to the Popout and Dropdown components, for automatic positioning depending on which side has the most space available.
• Adds new position auto usage example for the Popout component.
• Expands the position and alignment usage example for the Popout component to include automatic positioning.
• Expands the position and alignment usage example for the Dropdown component to include automatic positioning.
• Fixes a macOS Safari repaint bug in the Radio component.
• Release date 13.2.2025.

3.20.0 #

• Adds new disabled property for the Dropdown Item component.
• Adds new disabled example for the Dropdown Item component.
• Removes the baseline value for the justifyContent property of the Stack component, as it is not a valid CSS value and had no effect.
• Adds the baseline value for the alignItems property of the Stack component.
• Adds new using horizontal align baseline example for the Stack component.
• Fix accessibility issue reported by automated testing in Select component.
• Release date 29.1.2025.

3.19.0 #

• Adds new var(--n-select-inline-size) CSS Property for Select that controls the inline size, or width, of the select.
• Adds new custom width usage example for the Select component.
• Fixes the vertical alignment of an Avatar with initials on low pixel density screens.
• Release date 20.11.2024.

3.18.2 #

• Fixes an issue where Nordicons were being fetched from the CDN with an outdated version.
• Release date 27.9.2024.

3.18.1 #

• Fixes the line-height of the Radio and Toggle component labels.
• Migrates the monorepo to use pnpm workspaces instead.
• Release date 24.9.2024.

3.18.0 #

• Adds new rawValue property for the Date Picker component. This new read-only property allows you to get the raw value of the Input Field without the date formatting.
• Adds new validation example for the Date Picker component which utilizes the new rawValue property.
• Adds new button type for the Input component for when you want a button styled as a Nord Input.
• Improves the support for non-browser environments and ensures most of our components can be imported and function there as well.
• Improves React developer experience by exporting the component types from the React package. View the updated React documentation.
• Improves the accessibility of the role="listbox" element inside the Command Menu component.
• Fixes an issue with the Navigation component’s sticky footer which previously had incorrect colors when viewed in dark mode.
• Fixes an issue with the Segmented Control Item and Radio components which in React never “unchecked” themselves when the user chose another option.
• Updates the underlying Lit package from 2.7.4 to the latest 3.2.0 version.
• Updates all other package dependencies to the latest versions as well.
• Release date 17.9.2024.

3.17.0 #

• Makes it possible to control the text color of the label in form components using var(--n-label-color). This change affects Checkbox, Date Picker, Input, Radio, Toggle, Textarea, Select, and Fieldset components. View an example.
• Removes draft status from the Segmented Control, Segmented Control Item, Tag and Tag Group components and marks them as ready for production usage.
• Release date 4.9.2024.

3.16.0 #

• We’ve improved the sizing of labels when using the small variants of form components. This change affects Checkbox, Date Picker, Input, Radio, Toggle, Textarea, Select, and Fieldset components.
• Fixes an issue where the Modal component abruptly closed when the user tried to scroll the contents using the browser’s built-in scrollbar.
• Release date 3.9.2024.

3.15.0 #

• Adds new small and large size Radio component variants.
• Fixes an issue where a single Button in a Button Group component did not have a border radius in every corner.
• Fixes an issue where a single Tag in a Tag Group component did not have a border radius in every corner.
• Fixes an issue with the Dropdown Item component where the icon in the start slot got smaller when the content overflowed its container.
• Improves the layout of the Dropdown Item component. Previously, the default slot of the Dropdown Item did not fill up all available space, which prevented the consumers from adding content in the default slot that needed to span the entire width.
• Release date 2.9.2024.

3.14.1 #

• Fixes an issue that caused the Message component to have wrong hover styles.
• Release date 26.6.2024.

3.14.0 #

• Adds text selection props and methods to Input and Textarea components.
• Adds new text selection usage example for the Input component.
• Adds new input mask usage example for the Input component.
• Adds new text selection usage example for the Textarea component.
• Adds new documentation about input masking using Maskito.
• Improves documentation about events from sub components that bubble up.
• Modifies the Stack component to not apply a default text color.
• Release date 24.6.2024.

3.13.0 #

• Adds new Popout component example that shows how to build interactive filter buttons for Provet Cloud.
• Adds new var(--n-dropdown-item-background-color) CSS Property for Dropdown Item that controls the background color of the item.
• Adds new var(--n-dropdown-item-color) CSS Property for Dropdown Item that controls the color of the text within the item.
• Improves the focus styles of the Button Group and the Tag Group to be more consistent.
• Adds new documentation about v-model usage for the Checkbox, Toggle, and Tag components.
• Release date 14.6.2024.

3.12.0 #

• Adds new Segmented Control component that is used to pick one choice from a set of closely related choices, and immediately apply that selection.
• Adds new Segmented Control Item component that is used to populate Segmented Control with options.
• Adds new Tag Group component that is designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
• Adds documentation and usage examples for the new Segmented Control component.
• Adds documentation and usage examples for the new Segmented Control Item component.
• Adds documentation and usage examples for the new Tag Group component.
• Removes hover color of the Select component’s caret to make it consistent with the Dropdown component.
• Adds expand property to the Tag component.
• Adds support for xs gap in the Stack component.
• Improves the Button Group documentation slightly.
• Release date 3.6.2024.

3.11.1 #

• Fixes focus trap issue when an open Modal component is removed from the DOM.
• Release date 24.5.2024.

3.11.0 #

• Modifies the L size of the Modal component to have a max-width of 940px instead of the previous 1320px.
• Adds new XL size for the Modal component that covers the full width of the viewport.
• Adds new stickyFooter property for the Navigation component that controls whether the Navigation’s footer slot has sticky positioning or not.
• Updates the documentation and usage examples of the Navigation component.
• Adds 4 new icons to Nordicons: interface-dnr, interface-cpr-acpr, interface-cpr-unknown and interface-ai.
• Updates the disabled styles for the Checkbox, Radio, and Toggle components.
• Improves the icon and font sizing of the Avatar component.
• Adds new Avatar usage example that shows how to display patients and clients in Provet Cloud using the Avatar component.
• Adds new Avatar usage example that shows how to display users in Provet Cloud using the Avatar component.
• Improves the documentation of the Avatar component.
• Adjusts the disabled styles of the Button component for better legibility.
• Adds square property for icon only buttons. Take a look at the updated Button component examples.
• Adds new spaced variant for the Button Group component that makes it easier to create a group of buttons with consistent spacing.
• Adds new wrap property for the Button Group component that allows the buttons to wrap to the next line when the container is too narrow.
• Updates the documentation and usage examples of the Button Group component.
• Release date 22.5.2024.

3.10.0 #

• Adds new Tag component that represent a set of keywords that help label, categorize, and organize objects. Tags are commonly used to signify the attributes of an object.
• Adds documentation and usage examples for the new Tag component.
• Nord’s components now reflect most primitive data properties to attributes to follow the Custom Element best practices. This is especially helpful for frameworks like Vue that try to set properties over attributes for Custom Elements whenever possible.
• Simplifies Modal component’s focus trap logic by using the new inert attribute. This fixes an issue where users could not select text inside the modal.
• Improves Modal component’s “click outside” logic. With this release, the modal will now no longer close when the mousedown event has started from inside the modal and the mouseup occurs outside of it. This fixes an issue where users would try to select text inside a modal and then release the mouse outside.
• Release date 8.5.2024.

3.9.0 #

• Adds new Footer component that can be used to provide additional information or actions that are positioned below the main content. Additionally, the Footer can also be used to show actions for stepped workflows.
• Adds documentation and usage examples for the new Footer component.
• Implements the new Footer component into the Modal and