NVIDIA/elements

NVIDIA/elements

Description: The Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles

Language: TypeScript

License: Apache-2.0

Stars: 14

Forks: 1

Open issues: 2

Created: 2026-03-02T18:28:07Z

Pushed: 2026-06-10T19:16:35Z

Default branch: main

Fork: no

Archived: no

README:

NVIDIA Elements

The Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.

• Agent-ready tooling: CLI and MCP expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.
• Framework agnostic: Web Components run in React, Angular, Vue, Svelte, Lit, plain HTML, server-rendered templates, and mixed stacks.
• Built for AI infrastructure: Operational UI for AI/ML workloads, autonomous vehicle tools, and robotics consoles.
• Stable API contracts: Skills and lint guide authoring best practices, common UI patterns, and automated static analysis.

Requests and Contributions

• NVIDIA Elements Documentation
• Contribution Guidelines
• Feature request
• Bug report

Organization

The repository is organized as a top-level overall repository and, inside that, libraries are broken up into individual project directories.

Project directories have their own package.json and commands. But all setup for the CI and development needs to happen at the root repository level.

Examples of projects include:

• /projects/starters - Suite of standardized starter apps for Elements and Patterns
• /projects/core - Elements library: curated UI maintained by the Elements team
• /projects/themes - Elements Theme library: provides a set of supported themes for Element based projects
• /projects/styles - Elements Styles library: provides a set of CSS utilities for layout and typography

Development

Setup

To set up repository dependencies and run the full build, run the following commands at the root of the repository:

# install required dependencies
brew install git-lfs
git lfs install
git lfs pull
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
. ~/.nvm/nvm.sh
nvm install
npm install -g corepack@0.34.7
corepack enable
corepack prepare --activate
pnpm i --frozen-lockfile --prefer-offline

# run ci pipeline locally (lint, build, test)
pnpm run ci

Troubleshooting

If you are coming from development from a different repository, you may need to install a new version of node in nvm. If you see an error message to this effect, refer to the nvm docs for installing the missing node version and for directions on switching between versions of node using nvm. Once nvm is installed you can switch to the repository defined node and pnpm versions by re-running the [setup/install step](#setup) above.

If you actively switch between different repositories, run nvm use && corepack prepare --activate in the root of the project to ensure use of the correct node/pnpm version.

Building

Both the top-level repository and each project have a set of standardized npm scripts. To build and test all projects, run pnpm run ci at the root of the repository.

Top-Level Repository

• ci: run full build/lint/test
• ci:all: entire CI process: build, lint, unit/lighthouse/visual tests
• ci:reset: clear all caches/dependencies then reinstall dependencies

Individual Projects

Common project scripts include:

• dev: run in watch mode
• build: run project/library build
• test: run unit tests
• test:lighthouse: run lighthouse performance tests
• test:visual: run playwright visual regression tests
• test:axe: run axe tests for a11y

The available scripts vary by project. Check the project's package.json before running project-specific commands.

To learn in detail how the repo is built and run see our build system documentation.

Workflow

Before creating a branch or pull request be sure to make a new issue or feature request first for the team to evaluate. This will help ensure that your work aligns with the goals of the project and that you are not duplicating effort.

Create a Branch

Use a descriptive branch name with the topic/ prefix. Example topic/bug-fix.

git checkout -b topic/bug-fix

Once your branch is created, make your source code changes. Once your changes are complete run pnpm run ci in the root of the repo to run all the builds and tests. If all tests pass, you are ready to create a PR.

Commit Messages

The repo uses Semantic Release to manage package changes. Commit messages determine the type of release on merge. Commit Lint will enforce and catch any formatting issues in commits.

git commit -a -s -m "fix(core): disable multi-select"

Example Commit

| Types | Description | | ------- | --------------------------------------------------------------- | | fix | bug fixes, performance fixes | | feat | new features, components, APIs | | chore | non production code modifications, build tooling, documentation |

| Scopes | Description | | ----------- | ------------------------------ | | ci | CI and release automation | | cli | /projects/cli | | code | /projects/code | | core | /projects/core | | create | /projects/create | | deps | dependency updates | | docs | documentation and site content | | forms | /projects/forms | | internals | /projects/internals | | lint | /projects/lint | | markdown | /projects/markdown | | media | /projects/media | | monaco | /projects/monaco | | pages | /projects/pages | | starters | /projects/starters | | styles | /projects/styles | | themes | /projects/themes |

Keep commit names focused on the changes you are making as the commit message is what is used to determine the next release and generated changelog notes.

Opening a Pull…