0.2.2 • Public • Published

OpenBridge Web Components

This is an implementation of the openbridge design system in web components.


A storybook demo is available here.

How to use the components.

The project can be used directly from npm.

  1. Install the package by: npm install openbridge-web-components

  2. Install openbridge-css: npm install openbridge-css

  3. Include the package in you javascript code (vue/react/angular) import "openbridge-web-components";

  4. Include the openbridge css in your project openbridge-css/dist/css/openbridge.css

  5. Set the theme in the html tag, for instance <html theme="day">

  6. Use the components, e.g.,:

     `<ob-rudder-medium rudderAngle="5" rudderSetPointAngle="3" clipAngle="60" showPortStarboard="false" showSetPoint="true"/>`

SVG export

There is also a tool for exporting SVG components from Figma. To run the exporter you need to acquire an token here. The exporter generates SVGs. The project also includes WebComponents.

Generated SVGs cleaned Generated SVGs with inline style

How to contribute

We welcome all contributions! This could for instance be bug reports or implementation of components. We accept implementation in all major frameworks, but prefer web-components and vue.js.

Implementation guideline

  1. Use basic components if possible. For instance use the WatchFace component.
  2. Export SVG components by defining the component in src/exports.ts. This ensures that the component works in all palettes.
  3. Center of the SVG viewbox should be (0,0).




npm i openbridge-web-components

DownloadsWeekly Downloads





SEE LICENSE IN license.txt

Unpacked Size

6.56 MB

Total Files


Last publish


  • torsteinbo