Clickto expand
Web Components5.0.3
Presentational user interface components with encapsulated styles that can be used with any JavaScript framework. Browse by category, or use the filter in the header.
Action
- <nord-button>
Button
Buttons are used for interface actions, with a primary style for the main call-to-action.
- <nord-button-group>
Button Group
Brings together button controls that are of a similar nature, such as text formatting controls.
- <nord-command-menu>
Command Menu
Navigate and use an app from the keyboard, helping people become power users.
- <nord-message>
Message
Represent a specific item within a collection, such as notifications, tasks or conversations.
- <nord-segmented-control>
Segmented Control
A compact set of mutually exclusive options shown side by side.
Data input
- <nord-autocomplete>
New Alpha Light DOM Autocomplete
A free-text input with suggestions, where the text the user types is itself the value and the options are completion aids.
- <nord-calendar>
Updated Calendar
Lets users pick a date from a month grid, with optional minimum and maximum bounds.
- <nord-checkbox>
Updated Checkbox
Allows the user to choose one or more options from a limited set of options.
- <nord-combobox>
New Alpha Light DOM Combobox
Lets users choose one or several options from a list by typing to filter, then picking with the keyboard or pointer.
- <nord-date-picker>
Updated Date Picker
Lets users enter a date by typing it or by choosing it from a calendar.
- <nord-date-range-picker>
New Alpha Light DOM Date Range Picker
Lets users choose a start and end date as a single range, from a list of presets or a range calendar.
- <nord-field>
New Alpha Light DOM Field
A composable wrapper for laying out a form control with a label, helper text, and error message.
- <nord-filter-bar>
New Alpha Light DOM Filter Bar
Composition-first filter controls for toolbars and table headers — your app owns the active filters and URL state, Nord owns the controls, layout and semantics.
- <nord-input>
Updated Input
Used to allow users to provide text input when the expected input is short.
- <nord-number-field>
New Alpha Light DOM Number Field
A control for entering a numeric value, with stepper buttons, optional drag-to-scrub, and locale-aware formatting.
- <nord-otp-field>
New Alpha Light DOM Otp Field
A segmented one-time-code input that renders individual character cells with autofill and validation support.
- <nord-radio>
Updated Radio
Allows the user to choose only one option from a predefined set of mutually exclusive options.
- <nord-range>
Updated Range
Lets users specify a numeric value using a slider between a minimum and maximum.
- <nord-select>
Updated Select
Lets users choose one option from an options menu.
- <nord-textarea>
Updated Textarea
Allows users to write text over multiple rows, used when the expected input is long.
- <nord-time-picker>
New Alpha Time Picker
A native time field paired with a dropdown of selectable times at a configurable interval.
- <nord-toggle>
Updated Toggle
A switch control for turning a single setting on or off.
- <nord-fieldset>
Deprecated Fieldset
Groups related form controls under a legend. Deprecated in favour of the composable Field family.
List & table
Content & media
- <nord-avatar>
Avatar
A visual representation of a user or entity, shown as an image, initials, or icon.
- <nord-icon>
Icon
Renders a Nord icon by name, sized and coloured to match surrounding text.
- <nord-kbd>
New Alpha Light DOM Kbd
Displays a keyboard key, such as a shortcut or a key the user should press.
- <nord-qrcode>
Qrcode
Renders a scannable QR code for a URL or text value.
- <nord-tag>
Tag
A compact label for a keyword, attribute, or selectable option.
- <nord-truncate>
New Truncate
Clamps overflowing text to one or more lines, revealing the full value in a tooltip.
- <nord-visually-hidden>
Visually Hidden
Hides content visually while keeping it available to assistive technology.
Feedback & status
- <nord-badge>
Badge
Inform users of the status of an object or of an action that's been taken.
- <nord-banner>
Updated Banner
Inform users about important changes or conditions in the interface in a prominent way.
- <nord-empty-state>
Empty State
Communicate that there's no content to display, and guide users toward a next step.
- <nord-meter>
New Alpha Light DOM Meter
A graphical display of a numeric value within a known range, such as disk usage, a battery level or a score.
- <nord-notification>
Notification
A persistent, dismissible message about an event that needs attention.
- <nord-progress>
Progress
Display a circular pie-chart style progress indicator with a customizable size and color.
- <nord-progress-bar>
Progress Bar
Visually represent the completion of a task or process along a horizontal bar.
- <nord-skeleton>
Skeleton
Provide a low fidelity representation of content before it appears in a view.
- <nord-spinner>
Spinner
Indicate to users that their action is being processed.
- <nord-toast>
Toast
A brief, self-dismissing message confirming an action or reporting status.
Navigation
- <nord-navigation>
Navigation
A vertical sidebar of links and groups for moving around an app.
- <nord-outline>
New Alpha Outline
An in-page table of contents that lists a page's headings and highlights the section currently in view.
- <nord-pagination>
New Alpha Light DOM Pagination
Composition-first navigation primitives for paging through a collection — your app owns the state, Nord owns the semantics, layout and styling.
- <nord-tab>
Tab
Toggle between related panels of content on the same page.
Overlay
- <nord-dropdown>
Dropdown
A menu of actions or options revealed from a toggle.
- <nord-modal>
Modal
Display content that temporarily blocks interaction with the main view of an application.
- <nord-popout>
Updated Popout
A small overlay that opens on demand to surface additional content and actions.
- <nord-tooltip>
Tooltip
A floating container that shows additional information for the currently focused element.
Layout
- <nord-aside>
New Aside
A right-side rail and drawer layout for surfacing secondary content alongside the main view.
- <nord-divider>
Divider
Dividers separate and distinguish sections of content or groups of menu items.
- <nord-drawer>
Drawer
Display context-sensitive actions and information without blocking the main task.
- <nord-footer>
Footer
The footer is a block of designated space for information or actions positioned below the main content.
- <nord-header>
Header
The header is a block of designated space for labelling the current context and providing primary actions.
- <nord-layout>
Layout
Layout is the application shell that arranges the navigation sidebar, header, main content, footer and drawer.
- <nord-scroll-area>
New Alpha Scroll Area
A scroll container with custom, consistently-styled scrollbars and optional edge fades.
- <nord-stack>
Stack
Stack manages layout of immediate children along the vertical or horizontal axis with optional spacing.
- <nord-top-bar>
Top Bar
Top bar is a header component, always visible at the top of the interface, for search and contextual menus.
Container
- <nord-accordion>
New Alpha Light DOM Accordion
A vertically stacked set of collapsible sections, each with a header that toggles its content.
- <nord-card>
Card
Cards are shadowed surfaces that display content and actions on a single topic.
- <nord-collapsible>
New Alpha Light DOM Collapsible
A single section of content that expands and collapses behind a trigger.