Preact

Install CLI

Install the Elements CLI to your system. This creates a canonical executable path and adds the nve command to your path when possible.

curl -fsSL https://nvidia.github.io/elements/install.sh | bash

irm https://nvidia.github.io/elements/install.ps1 | iex

# install the CLI
npm install -g @nvidia-elements/cli

Create a New Project

Use the Elements CLI to quickly bootstrap a new preact project with the necessary dependencies:

nve project.create --type=preact

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 Preact jsx and tsx files.

import '@nvidia-elements/core/alert/define.js';

Properties and events then work via the standard Preact template 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 global {
  namespace preact.JSX {
    interface IntrinsicElements extends CustomElements { }
  }
}

export {}