Setting up OpenBridge with Lit

OpenBridge components are built on Lit, so using them with Lit (or plain HTML) is the most direct path — no wrapper package needed.

Install

npm install @oicl/openbridge-webcomponents

Import the CSS once in your app entry and set the theme attribute on <html>:

<html data-obc-theme="day">
  <body class="obc-component-size-regular">
    ...
  </body>
</html>

// main.ts / index.ts
import '@oicl/openbridge-webcomponents/dist/openbridge.css';

Ensure the Noto Sans font is available (load via Google Fonts or self-host).

Tree-shakable — import only what you render:

import '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';

<obc-slider min="0" max="100" value="50"></obc-slider>

Swap data-obc-theme between day, dusk, night, bright to switch palettes. All components follow the active theme automatically.