React
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 react project with the necessary dependencies:
nve project.create --type=react
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 React jsx and tsx files.
import '@nvidia-elements/core/alert/define.js';
Properties and events then work via the standard JSX syntax.
// - status - HTML attribute
// - closable - can update via attributes or JavaScript property binding
// - onclose - event listener binding for 'close' custom event
<nve-alert-group status="success">
<nve-alert closable={isClosable} onclose={(e) => closeAlert()}>hello there!</nve-alert>
</nve-alert-group>
To add TypeScript types to your TSX files add the elements interface to the IntrinsicElements interface.
// global.d.ts
import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx';
declare module 'react/jsx-runtime' {
namespace JSX {
interface IntrinsicElements extends CustomElements { }
}
}
React SSR
An experimental @lit-labs/ssr-react package exists for rendering elements with SSR.
// app/root.tsx, import before any other elements import statements
import '@lit-labs/ssr-react/enable-lit-ssr.js';
// the rest of your app
React 18
To use Elements in React v18 follow the installation getting started steps. Once complete
import and use Elements within React jsx and tsx files via the @nvidia-elements/core-react package. Use this package to enable React 18 compatibility with Custom Elements.
This package wraps the custom elements into a React component, mapping the standard events and properties in a way that React can understand.
@nvidia-elements/core-react package is no longer needed as of React version 19. Using Elements directly improves compatibility and performance.
import { NveDialog } from '@nvidia-elements/core-react/dialog';
// - closable - HTML attribute
// - hidden - can update via attributes or JavaScript property binding
// - onclose - event listener binding for 'close' custom event
<NveDialog closable modal hidden={!showDialog} onclose={() => setShowDialog(false)}>
...
</NveDialog>
Documented events use the on prefix in the elements-react package. Example, the event close maps to onclose. Imports also map 1:1 with the core library.
// Standard Web Component
import { Dialog } from '@nvidia-elements/core/dialog';
// React Component
import { NveDialog } from '@nvidia-elements/core-react/dialog';
To learn more about the @lit/react package, please visit the documentation.