automation

openbridge-webcomponents: Unified UI kit for fast‑track frontend builds

Name: openbridge-webcomponents: Unified UI kit for fast‑track frontend builds
Author: Ocean-Industries-Concept-Lab

Leverage Lit‑based web components that work across Angular, React, Vue, Svelte and more. Ideal for founders needing a consistent design system without reinventing UI code.

From the repo · “OpenBridge design system implemented as Lit-based web components with support for all major frontend frameworks.”

104 stars+1★ this week20 forksTypeScriptGuide quality 8/10 · reviewed Oct 14Updated 10/22/2026100% free · open source

What it does

OpenBridge-webcomponents provides a set of reusable, Lit-based web components that implement the OpenBridge design system, allowing for easy integration with major frontend frameworks

When to use it

•When building a web application that requires a consistent design system across different frameworks
•When needing to quickly prototype and test UI components with a standardized design
•When integrating multiple frontend frameworks in a single application and requiring a unified design language

Ready-to-paste prompt

<ob-button variant="secondary" onclick="alert('Button clicked!')">Click me</ob-button>

Heads up: Ensure you have the necessary dependencies installed, including Lit, and that your TypeScript configuration is set up to support the web components

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/openbridge-webcomponents && curl -fsSL https://workflowstacks.com/api/skills/openbridge-webcomponents/claude-skill -o ~/.claude/skills/openbridge-webcomponents/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

What's inside — free to inspect

No purchase needed

Read the entire source before you build — unlike paid marketplaces that hide it behind a buy button.

top-level files

folders

266.2M

source size

Other

license

Key files

AGENTS.md

package.json

README.md

File tree

.claude/

.cursor/

.devcontainer/

.github/

.husky/

.vscode/

.yarn/

docs/

packages/

scripts/

.coderabbit.yaml

.dockerignore

.gitignore

.nvmrc

.releaserc.json

AGENTS.md

CODE_OF_CONDUCT.md

CONTRIBUTING.md

Dockerfile

IMPLEMENTATION_GUIDELINES.md

LICENSE-AGPL.txt

LICENSE-APACHE.txt

LICENSE.txt

openbridge-webcomponents.code-workspace

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/openbridge-webcomponents && curl -fsSL https://workflowstacks.com/api/skills/openbridge-webcomponents/claude-skill -o ~/.claude/skills/openbridge-webcomponents/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

Ocean-Industries-Concept-Lab

Language

TypeScript