Skip to content

openbridge-webcomponents-react

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

openbridge-webcomponents-react

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

@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

v1.0.0 is now released! The code was officially opened by Prince Sverre Magnus of Norway, and the library is now stable and publicly available.

🏷️ Tag Strategy

We use npm tags to manage our releases:

  • latest: The stable, production-ready version of the library. It is updated approximately once every quarter. It's based on the stable branch in the GitHub repository.
  • next: The latest development version, containing new features and improvements. This version may include breaking changes and is intended for early adopters. It's based on the develop branch in the GitHub repository.

🤝 Support the Project

We are thrilled if you would like to support the OpenBridge Web Components project. Your contribution plays a vital role in maintaining an open, high-quality design system.

We invite industry partners to join our Joint Industry Project. By becoming a donor, you help secure the future of the project and gain influence over the roadmap.

Donor Benefits

By becoming a donor, you aren’t just supporting code—you’re joining a collaborative movement. To show our appreciation, donors receive a specialized benefits package valid for 12 months upon receipt of payment:

  • Proudly Show Your Support: You are authorized to use the official "OpenBridge Member" logo in your marketing materials and corporate communications.
  • Early & Easy Access: You gain the right to use all new releases of the project’s software components directly under the Apache License 2.0.

How to Support

If you are interested in supporting the project, please fill out this Support Form.

For more information, please contact Torstein A. Bø at torstein.bo@openstudio.no or contact us on Slack.

📚 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.

💬 Slack

Slack, join chat

Join our Slack to get the latest updates and to ask questions.

👫 Contributing

Contributions are welcome! Please see the root README and CONTRIBUTING.md for development instructions.