open-index/open-npm huggingface dataset:
npm package: @oicl/openbridge-webcomponents-ng
Description: Angular wrappers for the OpenBridge design system.
Latest version: 0.0.20260411072018

# @oicl/openbridge-webcomponents-ng

Angular wrappers for the OpenBridge design system.

[![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)

This package provides **Angular wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native Angular components with full IDE support, props, and event handling.

## ⚠️ Autogenerated

This package is **automatically generated** from the core library.

**Do not edit this package directly.** All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.

## 🏗️ Project Status

This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.

## 📚 Storybook & Demo

- **[Storybook](https://openbridge-storybook.web.app)**: Browse components and view their different states.
- **[Live Demo](https://openbridge-demo.web.app/)**: See the components in action.

## 💾 Installation

```bash
npm install @oicl/openbridge-webcomponents-ng
```

## 🚀 Quick Setup

### 1. Include CSS Palettes

Add the global OpenBridge CSS file to your `angular.json`:

```json
"styles": [
  "node_modules/@oicl/openbridge-webcomponents/dist/openbridge.css",
  "src/styles.css"
]
```

### 2. Set the Theme

Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):

```html
<html lang="en" data-obc-theme="day"></html>
```

### 3. Font Setup

Ensure **Noto Sans** is available in your project.

## 🧩 Usage

Import the desired components in your standalone component or module:

```typescript
import { ObcTopBarComponent } from "@oicl/openbridge-webcomponents-ng";

@Component({
  // ...
  standalone: true,
  imports: [ObcTopBarComponent],
})
export class MyComponent {}
```

Use it in your template:

```html
<obc-top-bar></obc-top-bar>
```

## 👫 Contributing

Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
npm package: @oicl/openbridge-webcomponents-react
Description: React wrappers for the OpenBridge design system.
Latest version: 0.0.20260411072018

# @oicl/openbridge-webcomponents-react

React wrappers for the OpenBridge design system.

[![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)

This package provides **React wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native React components with full IDE support, props, and event handling.

## ⚠️ Autogenerated

This package is **automatically generated** from the core library.

**Do not edit this package directly.** All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.

## 🏗️ Project Status

This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.

## 📚 Storybook & Demo

- **[Storybook](https://openbridge-storybook.web.app)**: Browse components and view their different states.
- **[Live Demo](https://openbridge-demo.web.app/)**: See the components in action.

## 💾 Installation

```bash
npm install @oicl/openbridge-webcomponents-react
```

## 🚀 Quick Setup

### 1. Include CSS Palettes

Import the global OpenBridge CSS file in your main entry point (e.g., `index.js` or `App.js`):

```javascript
import "@oicl/openbridge-webcomponents/dist/openbridge.css";
```

### 2. Set the Theme

Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):

```html
<html lang="en" data-obc-theme="day"></html>
```

### 3. Font Setup

Ensure **Noto Sans** is available in your project.

## 🧩 Usage

Import the desired components and use them in your React components:

```jsx
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react";

function App() {
  return (
    <ObcTopBar />
  );
}
```

For a more complete example, check the [React Demo](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/tree/main/packages/react-demo).

## 👫 Contributing

Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
npm package: @oicl/openbridge-webcomponents-svelte
Description: Svelte wrappers for the OpenBridge design system.
Latest version: 0.0.20260411072018

# @oicl/openbridge-webcomponents-svelte

Svelte wrappers for the OpenBridge design system.

[![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)

This package provides **Svelte wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native Svelte components with full IDE support, props, and event handling.

## ⚠️ Autogenerated

This package is **automatically generated** from the core library.

**Do not edit this package directly.** All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.

## 🏗️ Project Status

This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.

## 📚 Storybook & Demo

- **[Storybook](https://openbridge-storybook.web.app)**: Browse components and view their different states.
- **[Live Demo](https://openbridge-demo.web.app/)**: See the components in action.

## 💾 Installation

```bash
npm install @oicl/openbridge-webcomponents-svelte
```

## 🚀 Quick Setup

### 1. Include CSS Palettes

Import the global OpenBridge CSS file in your main entry point (e.g., `main.js` or `App.svelte`):

```javascript
import "@oicl/openbridge-webcomponents/dist/openbridge.css";
```

### 2. Set the Theme

Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):

```html
<html lang="en" data-obc-theme="day"></html>
```

### 3. Font Setup

Ensure **Noto Sans** is available in your project.

## 🧩 Usage

Import the desired components and use them in your Svelte components:

```html
<script>
  import { ObcTopBar } from "@oicl/openbridge-webcomponents-svelte";
</script>

<ObcTopBar />
```

## 👫 Contributing

Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
npm package: @oicl/openbridge-webcomponents-vue
Description: Vue.js wrappers for the OpenBridge design system.
Latest version: 0.0.20260411072018

# @oicl/openbridge-webcomponents-vue

Vue.js wrappers for the OpenBridge design system.

[![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)

This package provides **Vue.js wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native Vue components with full IDE support, props, and event handling.

## ⚠️ Autogenerated

This package is **automatically generated** from the core library.

**Do not edit this package directly.** All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.

## 🏗️ Project Status

This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.

## 📚 Storybook & Demo

- **[Storybook](https://openbridge-storybook.web.app)**: Browse components and view their different states.
- **[Live Demo](https://openbridge-demo.web.app/)**: See the components in action (built with Vue).

## 💾 Installation

```bash
npm install @oicl/openbridge-webcomponents-vue
```

## 🚀 Quick Setup

### 1. Include CSS Palettes

Import the global OpenBridge CSS file in your main entry point (e.g., `main.js`):

```javascript
import "@oicl/openbridge-webcomponents/dist/openbridge.css";
```

### 2. Set the Theme

Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):

```html
<html lang="en" data-obc-theme="day"></html>
```

### 3. Font Setup

Ensure **Noto Sans** is available in your project.

## 🧩 Usage

Import the desired components and use them in your Vue templates:

```vue
<script setup>
import { ObcTopBar } from "@oicl/openbridge-webcomponents-vue";
</script>

<template>
  <ObcTopBar />
</template>
```

For a more complete example, check the [Vue Demo](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/tree/main/packages/vue-demo).

## 👫 Contributing

Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.