Import Maps
Install CLI
Install the Elements CLI to your system. This will add the nve command to your path and provide several helpful commands for working with Elements.
curl -fsSL https://nvidia.github.io/elements/install.sh | bash
curl -fsSL https://nvidia.github.io/elements/install.cmd -o install.cmd && install.cmd && del install.cmd
# install the CLI
npm install -g @nvidia-elements/cli
Create a New Project
Use the Elements CLI to quickly bootstrap a new importmaps project with the necessary dependencies:
nve project.create --type=importmaps
Setup an Existing Project
Setup an existing project to use Elements you can use the setup command to add the necessary dependencies and configure the MCP server.
nve project.setup
If not yet done, install NodeJS. NodeJS is a JavaScript runtime that has a large ecosystem of tooling and packages for Web Development. Once installed the Node Package Manager (NPM) will be available for use.
Manual Integration
If installing to an existing project, install the core dependencies:
# install core dependencies
npm install @nvidia-elements/themes @nvidia-elements/styles @nvidia-elements/core
Using Import Maps you can use elements without build tooling such as Vite or Rollup for easy in browser prototyping.
<!DOCTYPE html>
<html lang="en" nve-theme="dark">
<head>
<title>Import Map Starter + @nvidia-elements/core</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="importmap">
{
"imports": {
"lit": "/node_modules/lit/index.js",
"lit/": "/node_modules/lit/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"lit-html/": "/node_modules/lit-html/",
"lit-element/lit-element.js": "/node_modules/lit-element/lit-element.js",
"lit-element/": "/node_modules/lit-element/",
"@lit/reactive-element": "/node_modules/@lit/reactive-element/reactive-element.js",
"@lit/reactive-element/": "/node_modules/@lit/reactive-element/",
"@nvidia-elements/core": "/node_modules/@nvidia-elements/core/dist/index.js",
"@nvidia-elements/core/": "/node_modules/@nvidia-elements/core/dist/"
}
}
</script>
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/themes/dist/fonts/inter.css" />
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/themes/dist/index.css" />
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/themes/dist/dark.css" />
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/styles/dist/typography.css" />
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/styles/dist/layout.css" />
<link rel="stylesheet" type="text/css" href="node_modules/@nvidia-elements/styles/dist/view-transitions.css" />
<script type="module">
import '@nvidia-elements/core/alert/define.js';
</script>
</head>
<body nve-text="body" nve-layout="column gap:md pad:lg">
<nve-alert status="success">hello world</nve-alert>
</body>
</html>
Registry Usage Guidelines
Security and Licensing Risks
When choosing between static bundles and build-time tooling with a package manager, it's important to consider security and legal compliance:
- Automated Vulnerability Scanning: NPM/PNPM and Artifactory provide built-in security scanning that detects known vulnerabilities in dependencies
- Dependency Auditing: Package managers track the complete dependency tree, making it easy to audit third-party libraries and identify versions used
- License Compliance: Automated license scanning helps compliance with legal requirements by flagging incompatible/restricted licenses
- Update Management: Centralized package management enables coordinated security updates, ensuring critical patches are applied consistently
- Version Control: Package lock files provide reproducible builds while keeping the actual library code out of source control
Committing Third-Party Libraries to Source Control Risks
- License Violations: Manual license tracking is error-prone and may result in using libraries with incompatible or restricted licenses, creating legal liability
- Hidden Vulnerabilities: Without automated scanning, security vulnerabilities in committed libraries may go undetected until they're exploited
- Stale Dependencies: Committed libraries are often not updated regularly, leaving projects exposed to known security issues
- Audit Complexity: Determining which third-party code is present, what versions are in use, and their license terms becomes a manual, time-consuming process
- Repository Bloat: Large binary files and library code increase repository size and slow down clone operations