NVIDIA Elements

NVIDIA 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 uses a top-level repository with individual project directories.

Project directories have their own package.json and commands. Run CI and development setup 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:

The CI pipeline also builds Go starters. Install Go 1.26.x before running the full local CI pipeline.

# install dependencies https://mise.en.dev/getting-started.html
curl https://mise.run | sh
~/.local/bin/mise run setup

Troubleshooting

If you are coming from development from a different repository, you may need to refresh the repository toolchain with mise. Run mise run install at the root of the project to install the Node.js, pnpm, Vale, Go, Git LFS, and package versions from mise.toml and pnpm-lock.yaml.

If you actively switch between different repositories, run commands through mise exec -- or activate mise in your shell so it switches tools automatically.

Building

Both the top-level repository and each project have a set of standardized npm scripts. To build and test all projects, run mise exec -- 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.

For details about the repository build and runtime flow, see the build system documentation.

Workflow

Before creating a branch or pull request, make a new issue or feature request first so the team can check alignment and avoid duplicate work.

Create a Branch

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

git checkout -b topic/bug-fix

After creating your branch, make your source code changes. After you complete them, run mise exec -- pnpm run ci

... View full README on GitHub