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 CheckboxCollapsible New Combobox New Command MenuDate PickerDate Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Add ButtonFilter DateFilter Date RangeFilter DropdownFilter FieldFilter InputFilter Reset ButtonFooterHeaderIconInputInput 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 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

Four Alpha Component Families for Product Interfaces

Nord 5.1 introduces four alpha component families for the product interfaces teams build most often: compact input compositions, constrained rows, split views and locale-aware dates.

The release is deliberately marked alpha. These components are ready for early product adoption and feedback, but their APIs may evolve as teams use them in production-shaped interfaces. Existing stable components keep their current APIs.

Compose denser controls

Input Group composes controls with add-ons and shared sizing, making compact search, currency, and inline-action fields easier to build consistently.

Overflow List keeps a constrained row useful by moving excess items into an accessible menu instead of letting the layout wrap or clip unpredictably.

Adapt layouts without local one-off patterns

Resizable provides keyboard-accessible, composable resize handles and panels for split views.

Timestamp presents dates and times with locale-aware formatting and clear semantic markup.

Try alpha components deliberately

Start with a bounded screen or feature where your team can give feedback quickly. Keep the component imports explicit, follow the composition examples in each component page, and retain visual-regression coverage around the states that matter to your product. We will use that feedback to stabilize APIs before these families graduate from alpha.

For exact version details, see the Web Components changelog.