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 |
Community Assets
| Accordion | pcnf-accordion |
| Address | pcnf-address |
| Billing Summary | pcnf-billing-summary |
| Breadcrumbs | pcnf-breadcrumbs |
| 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 |