ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBannerButtonButton GroupCalendarCard Updated Chart New Chat New Chat AttachmentChat ComposerChat Composer DrawerChat Composer InputChat Dictation ButtonChat Layout Scroll ButtonChat MessageChat Message BubbleChat Message ListChat Message MetadataChat Send ButtonChat System MessageChat TokenChat Tokenized TextChat Tool CallsCheckboxCollapsible New Combobox New Command MenuData Table New Date PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInputInput Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New PopoutProgressProgress BarQrcodeRadioRangeResizable New Rich Text Editor New Scroll Area New Segmented ControlSelectSkeletonSpinnerStackTabTableTagTextareaTime Picker New Timestamp New ToastToggleTooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

Changelog

Web ComponentsColor UtilitiesCSS FrameworkESLint PluginFigma ToolkitNordiconsThemesDesign TokensWebfonts

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.

ESLint Plugin

1.1.3

  • Maintenance release that aligns the package with the July 2026 Nord component release; no ESLint rule changes.
  • Release date 29.7.2026.

1.1.0 New

  • Updates Nord dependencies to the latest.
  • Release date 2.7.2026.

1.0.6

  • Adds n-font-size-xxs to the set of recognised valid legacy classes, mirroring the new --n-font-size-xxs design token.
  • Release date 16.6.2026.

1.0.4 → 1.0.5

  • Coupled version bump alongside the main monorepo release; no plugin source changes.

1.0.3

  • n-stack legacy class: Fix incorrect autofix output. The autofix now includes n:flex-wrap, which was previously missing from the generated replacement classes.
  • Release date 24.3.2026.

1.0.2

  • no-legacy-classes: Fixes background color migration mapping. The n-color-background legacy class now correctly migrates to n:bg-default instead of n:bg-background.
  • Release date 27.2.2026.

1.0.0

  • New major release that updates all ESLint rules to use Tailwind CSS v4's built-in logical property utilities, replacing our previous custom utility names.
  • BREAKING: logical-selectors rule now uses Tailwind CSS v4 built-in utility names:
    • Padding: ptpbs (was p-bs), plps (was p-is), etc.
    • Margin: mtmbs (was m-bs), mlms (was m-is), etc.
    • Border: border-lborder-s (was border-is), border-rborder-e (was border-ie)
    • Size: winline (was is), hblock (was bs)
    • Scroll: scroll-mtscroll-mbs (was scroll-m-bs), etc.
    • Removed py/px, my/mx, border-x/border-y mappings — TW4 already uses logical CSS.
    • Removed space-x/space-y mappings — TW4 already uses logical CSS (margin-inline/margin-block).
    • Removed divide-x/divide-y mappings — no custom divide utilities existed.
  • BREAKING: no-legacy-classes rule now outputs TW4 utility names for spacing, border, and size migrations:
    • n-margin-is-mn:ms-m (was n:m-is-m)
    • n-border-isn:border-s (was n:border-is)
    • n-inline-size-fulln:inline-full (was n:is-full)
  • Release date 19.2.2026.

0.3.1

  • no-legacy-classes: Updates shadow migration mapping. The n-box-shadow legacy class now migrates to n:shadow-default instead of n:shadow.
  • Release date 18.2.2026.

0.3.0

  • logical-selectors: Updated rule to handle negative value patterns. The rule now correctly detects and auto-fixes negative logical utilities (e.g., n:-ml-mn:-m-is-m).
  • logical-selectors: Improved variant prefix matching. Now supports arbitrary value variants like max-[1299px]: in addition to standard variants like hover: and n:.
  • Release date 11.2.2026.

0.2.2

  • no-legacy-classes: Simplify replacement mappings. Removes redundant mappings and consolidates the legacy class to Tailwind class conversion logic.
  • Release date 6.2.2026.

0.2.1

  • no-legacy-classes: Add conflict detection for compound class replacements. When replacing classes like n-stack or n-grid that expand to multiple Tailwind classes, the rule now detects conflicting utilities (e.g., n:gap-m vs n:gap-l) and resolves them intelligently:
    • Explicit single-output classes (e.g., n-gap-l) take priority over compound defaults.
    • Existing n:* classes take priority over compound defaults.
    • For compound vs compound conflicts, the rightmost class wins.
  • Fixes duplicate n-grid mapping that was incorrectly overwriting the layout version.

0.2.0

  • Initial release of @nordhealth/eslint-plugin - ESLint plugin for Nord Design System.
  • Adds @nordhealth/logical-selectors rule to enforce logical CSS properties (e.g., n:p-is-m instead of n:pl-m) for better RTL/LTR support. Auto-fixable.
  • Adds @nordhealth/no-unknown-legacy-classes rule to catch typos and invalid n-* legacy classes.
  • Adds @nordhealth/no-legacy-classes rule to migrate deprecated n-* classes to Tailwind n:* equivalents. Auto-fixable. Off by default.
  • Includes recommended and vue preset configurations with integrated better-tailwindcss rules.
  • Supports multiple frameworks: React, Vue, Svelte, Angular, and Astro.
  • Detects classes in utility functions: clsx, cn, cva, tv, twMerge, and more.
  • See ESLint Plugin documentation for usage details.
  • Release date 3.2.2026.