NV Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Golang Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About Changelog Metrics Support Accessibility Contributions Requests Migration 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 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 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

CDN

Use CDN-hosted Elements packages for prototypes, static pages, demos, and environments without a JavaScript build pipeline

CDN loading is the fastest path when you need a standalone HTML file or a server-rendered page that cannot use Vite, Rollup, ESBuild, or Webpack. For production applications with a build step, prefer package-manager installation so the app gets normal tooling, type checking, dependency locking, bundling, and tree-shaking.

Elements publishes the public packages to npm, and public CDN providers can serve those package files directly.

Browse the packages on jsDelivr:

Full Bundle

Use the full component bundle when you want the simplest static HTML setup. This loads the pre-built theme CSS, utility CSS, fonts, and all core component registrations.

This approach keeps authoring simple because one JavaScript import registers the bundled core components. The tradeoff is payload size: the page loads the full core bundle even if it uses only one component.

Component ESM Imports

Use jsDelivr ESM imports when the page uses only a small set of components.

Keep the pre-built CSS imports, then import only the define.js entrypoints for the components that appear in the page.

This approach can reduce JavaScript loaded by the page, but it has more moving parts. You must import every component registration that the markup uses, and browser-loaded ESM does not provide the same type checking, build diagnostics, dependency reuse, or optimization that package-manager builds provide.

CDN Tradeoffs

Approach Best For Tradeoff Full CDN bundle Artifacts, demos, static pages, CMS pages, and environments without JavaScript package tooling. Simplest setup, but loads the bundled component surface even when the page uses a small subset. CDN ESM imports Small standalone pages that use a known set of components. Loads fewer component modules, but every used component needs an explicit registration import. Build-time packages Applications, libraries, tested user workflows, and production codebases. Requires package tooling, but gives dependency locking, editor types, linting, test integration, bundling, and optimization.

For build-time package setup, use the standard installation flow:

Version Pinning

The examples above omit versions for readability. For shared demos or production pages, pin package versions in CDN URLs so a new package release cannot change the page without a source change.

Pin the related @nvidia-elements/core, @nvidia-elements/styles, and @nvidia-elements/themes URLs together.

Internal

NVIDIA-internal projects should use the internal CDN instead of public jsDelivr URLs. The internal CDN is the preferred CDN path for internal applications because it follows NVIDIA network policy, caching, availability, and package-distribution practices. Use public jsDelivr URLs for public examples and external demos.