nord from nordhealth.design

Nord Design System provides 55+ accessible, production-ready Lit web components (<nord-*> prefix), design tokens (CSS custom properties), Tailwind CSS v4 integration, two brands (therapy/veterinary) with dark mode and high-contrast variants. Framework-agnostic — works with React, Vue, Angular, Svelte, plain HTML.

Components

Component	Description	Reference
Web Components Overview	All component APIs, slots, and events	components
nord-avatar	Avatar is used for showing a thumbnail representation of a single user or entity.	avatar
nord-badge	Badges are used to inform users of the status of an object or of an action that’s been taken.	badge
nord-banner	Banner informs users about important changes or conditions in the interface.	banner
nord-button	Buttons are used for interface actions.	button
nord-button-group	Button groups are designed to bring together button controls that are of a similar nature.	button-group
nord-calendar	Calendar allows user to pick a date.	calendar
nord-card	Cards are shadowed surfaces that display content and actions on a single topic.	card
nord-checkbox	Checkboxes allow user to choose one or more options from a limited set of options.	checkbox
nord-command-menu	Command Menu allows users to navigate and use an app without touching the mouse and helps them transform into “power users” who can harness more advanced features far faster.	command-menu
nord-date-picker	Date Picker allows user to enter a date either through text input, or by choosing a date from the calendar.	date-picker
nord-divider	Divider components are used to separate and distinguish sections of content or groups of menu items.	divider
nord-drawer	Drawer is used to display context-sensitive actions and information.	drawer
nord-dropdown	Dropdown menu displays a list of actions or selectable options for a user.	dropdown
nord-dropdown-group	Dropdown group includes all the actions or items in a single dropdown group and is used for grouping items into related categories.	dropdown-group
nord-dropdown-item	Dropdown item populates dropdown with actions.	dropdown-item
nord-empty-state	Empty state can be used when there is no data to display to describe what the user can do next.	empty-state
nord-fieldset	Fieldset is used for grouping sets of input components.	fieldset
nord-footer	The footer is a block of designated space for providing additional information or actions that are positioned below the main content.	footer
nord-header	The header is a block of designated space for labelling the currently viewed context as well as providing primary actions.	header
nord-icon	Icons are used to provide additional meaning or in places where text label doesn’t fit.	icon
nord-input	Inputs are used to allow users to provide text input when the expected input is short.	input
nord-layout	Layout component is used to create the main layout of an app.	layout
nord-message	Message represents a specific item within a collection, such as notifications, tasks or conversations.	message
nord-modal	Modal component is used to display content that temporarily blocks interactions with the main view of an application.	modal
nord-nav-group	Navigation group includes all the actions or items in a single group and is used for grouping items into related categories.	nav-group
nord-nav-item	Navigation item populates sidebar navigation with links.	nav-item
nord-nav-toggle	Nav toggle is meant for hiding and showing the primary navigation.	nav-toggle
nord-navigation	Navigation is used to display the primary navigation in the sidebar of an application.	navigation
nord-notification	Notifications provide important information that requires action or acknowledgement.	notification
nord-notification-group	Notification group is used to position and style a group of notifications.	notification-group
nord-popout	Popouts are small overlays that open on demand.	popout
nord-progress	Progress component is used to display a circular pie-chart style progress indicator.	progress
nord-progress-bar	Progress Bar is used to visually represent the completion of a task or process.	progress-bar
nord-qrcode	QR Code component is used for providing information or links to users which they can quickly scan with their smartphone.	qrcode
nord-radio	Radio buttons are graphical user interface elements that allow user to choose only one option from a predefined set of mutually exclusive options.	radio
nord-range	Range input lets user specify a numeric value using a slider which must be no less than a given value, and no more than another given value.	range
nord-segmented-control	Segmented control is used to pick one choice from a set of closely related choices, and immediately apply that selection.	segmented-control
nord-segmented-control-item	Segmented control items populate a segmented control with options.	segmented-control-item
nord-select	Select lets users choose one option from an options menu.	select
nord-skeleton	Skeletons are used to provide a low fidelity representation of content before it appears in a view.	skeleton
nord-spinner	Spinner component is used to indicate users that their action is being processed.	spinner
nord-stack	Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.	stack
nord-tab	The interactive tab button for use within the tab group component.	tab
nord-tab-group	Tab Group allows multiple panels to be contained within a single window, using tabs as a navigational element.	tab-group
nord-tab-panel	The panel which contains content that can be revealed using a tab in the tab group component.	tab-panel
nord-table	Table is used to organize and display information from a data set.	table
nord-tag	Tags represent a set of keywords that help label, categorize, and organize objects.	tag
nord-tag-group	Tag groups are designed to bring together selectable tags that are of a similar nature.	tag-group
nord-textarea	Textarea is a component that allows user to write text over multiple rows.	textarea
nord-toast	Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.	toast
nord-toast-group	Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.	toast-group
nord-toggle	Toggle switch gives control over a feature or option that can be turned on or off.	toggle
nord-tooltip	Tooltips are floating containers for displaying additional information for the currently focused element.	tooltip
nord-top-bar	Top bar is a header component that is always visible at the top of the interface.	top-bar
nord-visually-hidden	Visually hidden is used when an element needs to be available to assistive technologies like screen readers, but be otherwise hidden.	visually-hidden

Design Guidelines

Topic	Description	Reference
Accessibility	WCAG compliance checklist, ARIA patterns, keyboard navigation	accessibility-checklist
Colour System	Colour tokens, palette, semantic colour usage	colors
Colour Utilities	CSS colour utility classes	color-utilities
CDN	CDN setup for components, CSS, fonts, icons	cdn
Grid	Layout grid system, responsive breakpoints	grid
Iconography	Icon usage, custom icons, Nordicons integration	iconography
Localisation	RTL support, translation patterns	localization
Naming	Component and token naming conventions	naming
Typography	Font stacks, type scale, text utilities	typography
Web Components	Lit web component patterns, lifecycle, slots, events	web-components
Webfonts	Font loading, self-hosting, CDN fonts	webfonts

Design Tokens

Topic	Description	Reference
Design Tokens	CSS custom properties for colour, spacing, typography, elevation	tokens

CSS Framework

Topic	Description	Reference
CSS Overview	Nord CSS framework, utility classes, reset styles	css
Tailwind CSS	Tailwind CSS v4 integration, `n:` variant prefix, theme config	css/tailwind
ESLint Plugin	Linting rules for Nord CSS conventions	css/eslint

Nordicons

Topic	Description	Reference
Nordicons	Icon library, available icons, usage patterns	nordicons

Themes

Topic	Description	Reference
Themes	Therapy/veterinary brands, dark mode, high contrast variants	themes

Migration Guides

Topic	Description	Reference
Migration Guides	Version upgrade guides, breaking changes	migrations