open-index/open-npm huggingface dataset:
npm package: @nvidia-elements/code
Description: Code authoring related components. Providing syntax-highlighted code blocks with support for multiple programming languages.
Latest version: 0.0.3

# @nvidia-elements/code

Syntax-highlighted code block components supporting many programming languages.

- [Documentation](https://NVIDIA.github.io/elements/docs/code/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/code
```

## Usage

```javascript
// import only languages needed
import '@nvidia-elements/code/codeblock/languages/bash.js';
import '@nvidia-elements/code/codeblock/languages/css.js';
import '@nvidia-elements/code/codeblock/languages/go.js';
import '@nvidia-elements/code/codeblock/languages/html.js';
import '@nvidia-elements/code/codeblock/languages/javascript.js';
import '@nvidia-elements/code/codeblock/languages/json.js';
import '@nvidia-elements/code/codeblock/languages/markdown.js';
import '@nvidia-elements/code/codeblock/languages/python.js';
import '@nvidia-elements/code/codeblock/languages/toml.js';
import '@nvidia-elements/code/codeblock/languages/typescript.js';
import '@nvidia-elements/code/codeblock/languages/xml.js';
import '@nvidia-elements/code/codeblock/languages/yaml.js';

// import codeblock component
import '@nvidia-elements/code/codeblock/define.js';
```

```html
<nve-codeblock language="typescript">
  <template>
    console.log('hello there')
  </template>
</nve-codeblock>
```
npm package: @nvidia-elements/core
Description: The Design Language for AI/ML Factories Building at the Speed of Light. Provides a set of accessible and themeable UI elements.
Latest version: 0.0.3

# @nvidia-elements/core

The design language for AI/ML factories. Provides a set of accessible, theme-ready UI elements.

- [Documentation](https://NVIDIA.github.io/elements/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```shell
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/themes @nvidia-elements/styles @nvidia-elements/core
```

Elements ships as many small packages. This allows you to choose what tools your application needs and omit anything unnecessary, improving application performance.

## Usage

```css
/* base theme */
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';

/* optional themes */
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/themes/debug.css';

/* optional CSS utilities */
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';
@import '@nvidia-elements/styles/view-transitions.css';
```

```typescript
// Load via typescript imports to make available in HTML templates
import '@nvidia-elements/core/button/define.js';
import '@nvidia-elements/core/dot/define.js';
...
```

```html
<!-- set global theme -->
<html nve-theme="dark" nve-transition="auto">
```

```html
<!-- use component in HTML template -->
<nve-button>hello there</nve-button>
```
npm package: @nvidia-elements/create
Description: Create new Elements projects with 'npm create @nve'. A thin wrapper that delegates to @nvidia-elements/cli for project scaffolding.
Latest version: 0.0.3

# @nvidia-elements/create

Create new Elements projects using `npm create @nve`.

## npm Usage

```bash
# Interactive project creation
npm create @nve

# Create a React project
npm create @nve react

# Create a Angular project
npm create @nve angular

# Create a Vue project
npm create @nve vue
```

### pnpm Usage

```bash
# Interactive project creation
pnpm create @nve

# Create a React project
pnpm create @nve react

# Create a Angular project
pnpm create @nve angular

# Create a Vue project
pnpm create @nve vue
```

## How It Works

This package is a thin wrapper that delegates to `@nvidia-elements/cli` for project scaffolding. It automatically detects your package manager:

- **npm**: Uses `npm exec --package=@nvidia-elements/cli@latest -y -- nve project.create --type=react`
- **pnpm**: Uses `pnpm dlx @nvidia-elements/cli project.create -- nve project.create --type=react`

## Available Project Types

Run the command with any supported starter template type. For a full list of available templates, see the [@nvidia-elements/cli documentation](https://NVIDIA.github.io/elements/).

## Resources

- https://docs.npmjs.com/cli/v9/commands/npm-init
- https://pnpm.io/cli/create
- https://yarnpkg.com/cli/init
npm package: @nvidia-elements/forms
Description: Form control utilities and validation providing mixins, validators, and schema-based validation. Includes form association, event handling, and support for complex data types.
Latest version: 0.0.3

# @nvidia-elements/forms

Form control utilities providing mixins, validation, and schema support for custom elements.

- [Documentation](https://NVIDIA.github.io/elements/docs/elements/forms/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/forms
```

## Usage

```javascript
import { FormControl } from '@nvidia-elements/forms';
```
npm package: @nvidia-elements/markdown
Description: A suite of markdown components and utilities.
Latest version: 0.0.3

# @nvidia-elements/markdown

A Web Component for rendering markdown content with full styling support.

- [Documentation](https://NVIDIA.github.io/elements/docs/markdown/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/markdown
```

## Usage

### Markdown Content (via source property)

Perfect for dynamic content and programmatic updates:

````html
<nve-markdown source="# Hello World

This is **bold** and *italic* text with a [link](https://example.com).

- List item 1
- List item 2

```javascript
const code = 'example';
```"></nve-markdown>
````

```javascript
// Programmatic updates
const element = document.querySelector('nve-markdown');
element.source = '# Updated Content\n\nNew markdown content here.';
```

## Features

- **Markdown Parsing**: Full markdown support with syntax highlighting, links, lists, and more
- **HTML Templates**: Support for raw HTML content via template elements
- **Two Input Modes**: Clear separation between markdown (source) and HTML (template)
- **Performance Optimized**: Lazy-loaded markdown parser for better initial load times
- **Design System Integration**: Styled with NVE design tokens and CSS custom properties
npm package: @nvidia-elements/monaco
Description: Provides integration with VS Code's Monaco editor for code editing, syntax highlighting, and diff visualization.
Latest version: 0.0.3

# @nvidia-elements/monaco

Integration with VS Code's Monaco editor for code editing, syntax highlighting, and diff visualization.

- [Documentation](https://NVIDIA.github.io/elements/docs/monaco/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/monaco
```

## Usage

```javascript
import '@nvidia-elements/monaco/editor/define.js';
```

```html
<nve-monaco-editor></nve-monaco-editor>
```
npm package: @nvidia-elements/styles
Description: Core CSS foundation for the Elements design system, providing layout utilities, typography styles, and view transitions.
Latest version: 0.0.3

# @nvidia-elements/styles

Core CSS foundation for the Elements design system, providing layout utilities, typography styles, and view transitions.

- [Documentation](https://NVIDIA.github.io/elements/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/styles
```

## Usage

```css
/* import the global CSS into your project */
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';
```
npm package: @nvidia-elements/themes
Description: Themes for the Elements design system, providing comprehensive color palettes, typography, and spacing.
Latest version: 0.0.4

# @nvidia-elements/themes

Themes for the Elements design system, providing comprehensive color palettes, typography, and spacing.

- [Documentation](https://NVIDIA.github.io/elements/docs/foundations/themes/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [NPM](https://registry.npmjs.org

## Getting Started

```bash
# local .npmrc file
registry=https://registry.npmjs.org

# https://registry.npmjs.org
npm login

npm install @nvidia-elements/themes
```

## Usage

```css
/* import the theme CSS into your project */
@import '@nvidia-elements/themes/index.css';
```

| Theme                            | Description          |
| -------------------------------- | -------------------- |
| `@nvidia-elements/themes/index.css`          | Default theme        |
| `@nvidia-elements/themes/high-contrast.css`  | High contrast theme  |
| `@nvidia-elements/themes/reduced-motion.css` | Reduced motion theme |
| `@nvidia-elements/themes/compact.css`        | Compact theme        |
| `@nvidia-elements/themes/dark.css`           | Dark theme           |