| 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 |
