NV NVIDIA Elements Catalog Starters GitHub System Themes Getting Started Getting Started Installation CLI MCP Skills Lint GitHub Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Pi Preact React SolidJS Sphinx Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Sitemap Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drag Handle Drawer Dropdown Dropdown Group Dropzone File Format Bytes Datetime Number Relative Time Truncate Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Loop Button Mute Button Media PiP Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Viewport Viewport Gridlines Minimap Zoom Range Week Patterns Agent Authentication Browse Chat Code Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

NVIDIA Elements Components

NVIDIA Elements components are production Web Components for an agent-ready design system. Use them to build AI infrastructure dashboards, robotics consoles, autonomous vehicle tools, and internal developer workflows with stable nve-* APIs, design tokens, accessibility guidance, and examples.

Accordion

An accordion is a vertical stack of interactive headings used to toggle the display of further information.

Alert

Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Avatar

Avatar represents a user/bot within a UI. Typically with text or image content.

Badge

A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.

Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.

Button

A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Button Group

A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.

Card

A container for content representing a single entity.

Chat Message

A chat message component displays a text message within a conversation, sent between users or bots

Checkbox

A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.

Color

A color picker is a control that enables users to choose a color value.

Combobox

An editable combobox with autocomplete behavior and selection support.

Controls

Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.

Copy Button

A copy button is a button that easily enables the copy to clipboard pattern.

Data Grid

A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.

Date

A date picker is a control that enables users to choose a date value.

Datetime

A datetime picker is a control that enables users to choose a datetime value.

Dialog

Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.

Divider

Divider is a component that separates and distinguishes sections of content or groups of menuitems.

Dot

A visual indicator that communicates a status or notification of an associated component.

Drag Handle

A draggable grip button with a native drag preview. Activation toggles the pressed state; the application controls movement.

Drawer

A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.

Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.

A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience

Dropzone

A dropzone form control that enables users to drag and drop files onto it.

File

A file picker is a control that enables users to choose a file value.

Format Bytes

Formats a byte count as localized, human-readable decimal or binary units.

Format Datetime

Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element. Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.

Format Number

A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat. Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.

Format Relative Time

Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element. Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.

Format Truncate

Truncates text at its start, center, or end while preserving the full text for assistive technology.

Gauge

Use a gauge to show system resource usage.

Icon

An icon is a graphic symbol designed to visually show the purpose of an interface element.

Icon Button

An icon button is a button that displays only an icon without a visual label.

Input

An input is a control that enables users to enter text.

Input Group

Visually combines many related input controls into a unified composite field with shared styling.

A visual indicator for a brand or application.

A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.

Month

A month picker is a control that enables users to choose a month value.

Notification

Displays real time updates without interrupting the user's workflow to communicate an important message or status.

Page

Provide a consistent page structure across the applications, ensuring a seamless user experience.

Page Header

An element that appears across the top of all pages containing the application name and primary navigation.

Page Loader

Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.

Pagination

Pagination is a control that enables users to navigate through pages of content.

Panels

Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).

Password

A password is a control that enables users to enter password text.

Preferences Input

A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.

Progress Bar

A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.

Progress Ring

The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.

Progressive Filter Chip

A filter chip is a control that enables users to select many options from a set of choices.

Pulse

Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.

Radio

A radio button is a control that enables users to choose one option from a list of mutually exclusive options.

Range

A range slider is a control that enables users to choose a value from a continuous range of values.

Resize Handle

A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.

A search is a control that enables users to enter text to search.

Select

A select is a control that enables users to select an option from a list of options.

Skeleton

A loading placeholder component that displays animated placeholder shapes while content loads.

Sort Button

A sort button is a control that enables users to sort a list of items in ascending or descending order.

Sparkline

A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).

Star Rating

A star rating component lets users rate something using stars, providing a quick visual representation of feedback

Steps

Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.

Switch

A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.

Tabs

Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

Tag

A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.

Textarea

A textarea is a control that enables users to enter and edit text.

Time

A time picker is a control that enables users to choose a time value.

Toast

A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.

Toggletip

Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

Toolbar

A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.

Tooltip

A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.

Tree View

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

Week

A week picker is a control that enables users to choose a week value.

Codeblock

A container for content representing programming languages.

Markdown

A Web Component that inputs markdown content and renders it as HTML formatted with Elements styles.

Media Controller

Wraps consumer-owned audio or video and applies media commands from external controls.

Media Full-screen Button

Requests controller full-screen changes without adding form submission state.

Media Loop Button

Requests continuous looping changes for the controlled media.

Media Mute Button

Requests muted changes and submits a checkbox-style value for muted media.

Media Pause Button

Requests playback changes and submits paused media as a checkbox-style value.

Media Picture-in-Picture Button

Requests picture-in-picture changes for the controlled video.

Media Playback Rate Select

Selects native media playback rate and submits the selected rate as a string form value.

Media Seek Button

Sends absolute or relative seek commands without adding form submission state.

Media Time Range

Scrubs finite media time and submits the current time as a numeric form value.

Media Volume Range

Sets native media volume and submits the current volume as a numeric form value.

Monaco Diff Editor

A low-level Monaco Editor wrapper that provides direct access to a diff editor instance and API.

Monaco Diff Input

An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.

Monaco Editor

A low-level Monaco Editor wrapper that provides direct access to an editor instance and API.

Monaco Input

An input control for editing JSON, YAML and code with syntax highlighting and validation.

Monaco Problems

A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).