TypeScript
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 typescript project with the necessary dependencies:
nve project.create --type=typescript
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
Once installed import and use Elements within TypeScript files. Import the Element class definitions via type imports for static type checking.
import '@nvidia-elements/core/alert/define.js'; // import and register element to DOM
import type { Alert } from '@nvidia-elements/core/alert'; // import type definition
// type can now be used for static type checking in interfaces and for generic type arguments
const alert = document.querySelector<Alert>('nve-alert');
// set JavaScript properties
alert.closable = true;
alert.status = 'success';
// set HTML attributes
alert.setAttribute('closable', '');
alert.setAttribute('status', 'success');
// create event listeners
alert!.addEventListener('close', e => console.log(e.target));
Advanced Installation
If you are not on typescript >= version 4.5.x you need to add this type declaration to use isolated element imports:
/* ./src/declarations.d.ts */
interface ElementInternals {
any: any;
}
If you are using tsconfig path mapping you likely need to enable the skipLibCheck to avoid type definition collisions within the monorepo. Or, to avoid skipLibCheck use npm workspaces instead of tsconfig path mapping.
{
"compilerOptions": {
"skipLibCheck": true
}
}