@oicl/openbridge-webcomponents-react
v0.0.20260411072018
Published
React wrappers for the OpenBridge design system.
Readme
@oicl/openbridge-webcomponents-react
React wrappers for the OpenBridge design system.
This package provides React wrappers for the @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: Browse components and view their different states.
- Live Demo: See the components in action.
💾 Installation
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):
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 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:
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react";
function App() {
return (
<ObcTopBar />
);
}For a more complete example, check the React Demo.
👫 Contributing
Contributions are welcome! Please see the root README and CONTRIBUTING.md for development instructions.