Installation
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 project with the necessary dependencies:
nve project.create
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
Elements ships as many small packages. This allows you to choose what tools your application needs and omit anything unnecessary, improving application performance.
/* base theme */
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';
/* optional themes */
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/themes/debug.css';
/* optional CSS utilities */
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';
@import '@nvidia-elements/styles/view-transitions.css';
// Load via typescript imports to make available in HTML templates
import '@nvidia-elements/core/button/define.js';
import '@nvidia-elements/core/dot/define.js';
...
<!-- set global theme -->
<html nve-theme="dark" nve-transition="auto">
<!-- use component in HTML template -->
<nve-button>hello there</nve-button>
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