NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Integrations Installation MCP CLI Lint Angular Bundles Custom Elements Extensions Golang Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations 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 Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid 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 Drawer Dropdown Dropdown Group Dropzone File Format Datetime Format Number Format Relative Time Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel 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 Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility 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

Custom Elements Manifest

Elements packages publish machine-readable component API metadata for tools that understand Web Components

A Custom Elements Manifest is a JSON file that describes a package's custom elements. The standard exists so editors, documentation viewers, linters, framework adapters, catalogs, and test tooling can read one package-level API description instead of scraping source code.

Elements packages that publish a manifest declare it in package.json:

That field is the discovery hook. Tools can inspect package.json, find the customElements path, and load the package's dist/custom-elements.json file from node_modules.

What Is In The Manifest

The manifest describes the public Web Component surface. For Elements components, that includes:

  • Tag names such as nve-button
  • JavaScript module paths and custom element definition exports
  • Public properties and reflected attributes
  • Events
  • Slots
  • CSS custom properties
  • Component descriptions, examples, status metadata, and package metadata

The manifest does not register components. Continue to use explicit registration imports such as @nvidia-elements/core/button/define.js when application code needs the component at runtime.

Published Package Files

Most published @nvidia-elements/* packages include customElements metadata. Component packages commonly expose a small set of generated integration files beside the manifest:

File Description dist/custom-elements.json The standard Custom Elements Manifest. This is the canonical component API metadata file. dist/data.html.json VS Code HTML custom data generated from the manifest. Editors use it for tag, attribute, hover, and reference information. dist/data.snippets.json Generated HTML snippets for faster component authoring. dist/custom-elements-jsx.d.ts Generated JSX intrinsic element types for JSX-based integrations such as Preact and SolidJS. dist/custom-elements-vue.d.ts Generated Vue template and JSX types where the package exposes Vue integration types.

The exact generated files vary by package. The customElements field is the stable signal that a package ships a CEM file.

Tooling Enabled By CEM

Editor Integration

VS Code can load custom HTML and CSS data through html.customData, css.customData, and extension contribution points. Elements converts CEM data into data.html.json so VS Code-compatible HTML language services can offer completions and hover docs for nve-* tags and attributes. The Elements project setup command writes the common Elements custom data paths into .vscode/settings.json for supported packages.

Some editors and extensions can consume CEM more directly. WebComponents.dev recognizes custom-elements.json and the package.json#customElements field. The Custom Elements Manifest Language Server for Zed provides autocomplete and hover documentation from CEM data. The Custom Element Language Server VS Code extension can find customElements fields and convert CEM into VS Code custom data.

Framework Types

Elements uses CEM to generate type adapters for framework-specific authoring surfaces. The build uses custom-element-jsx-integration for JSX intrinsic element types and custom-element-vuejs-integration for Vue type declarations. These files help template and JSX tooling validate component names, attributes, properties, and events without requiring a framework-specific implementation of each component.

References