Skip to content

README.md

Latest commit

 

History

History
70 lines (42 loc) · 2.25 KB

README.md

File metadata and controls

70 lines (42 loc) · 2.25 KB

@oicl/openbridge-webcomponents-react

React wrappers for the OpenBridge design system.

Slack, join chat

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.