Nord Design System provides 56+ 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-dropdown-submenu | Dropdown submenu nests a secondary menu within a parent dropdown. | dropdown-submenu | | 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 |
Community Assets
| Accordion | pcnf-accordion | | Address | pcnf-address | | Billing Summary | pcnf-billing-summary | | Breadcrumbs | pcnf-breadcrumbs | | Bulk Actions Header | pcnf-bulk-actions-header | | Card Collapsible | pcnf-card-collapsible | | Card Data | pcnf-card-data | | Combobox | pcnf-combobox | | Communication Preferences | pcnf-communication-preferences | | Container | pcnf-container | | Cta And Links | pcnf-cta-and-links | | Date Range Picker | pcnf-date-range-picker | | Divided Stack | pcnf-divided-stack | | Export Popout | pcnf-export-popout | | Filter Add Button | pcnf-filter-add-button | | Filter Bar | pcnf-filter-bar | | Filter Dropdown | pcnf-filter-dropdown | | Input Number | pcnf-input-number | | Legend Counter | pcnf-legend-counter | | Money | pcnf-money | | Number Stepper | pcnf-number-stepper | | Overflow Inline List | pcnf-overflow-inline-list | | Overflow List | pcnf-overflow-list | | Pagination | pcnf-pagination | | Popup | pcnf-popup | | Result Range Visualizer | pcnf-result-range-visualizer | | Rich Text Editor | pcnf-rich-text-editor | | Selection Popout | pcnf-selection-popout | | Tab Menu | pcnf-tab-menu | | Tags | pcnf-tags | | Time Duration | pcnf-time-duration | | Time Picker | pcnf-time-picker | | Toast | pcnf-toast |
Migration Guides
| Topic | Description | Reference |
|---|
| Migration Guides | Version upgrade guides, breaking changes | migrations |
