Open Web Components

@open-wc/components

Web components for data-heavy interfaces.
Tables, forms, and workflow UI as plain ESM.

Framework-agnostic Lit components with typed APIs and copy-paste demos. Import only what you use — unbundled modules, no build step required.

Browse components See the Table
Install npm install @open-wc/components
  • MIT licensed
  • 30+ components
  • Unbundled ESM

Copy, paste, render#

Register a component through its define entry point and pass data as properties. This example is complete enough to paste into any Lit view:

import { html } from 'lit';
import '@open-wc/components/define/owc-table.js';

const columns = [
  { label: 'First name', field: 'firstName', filterable: true },
  { label: 'Last name', field: 'lastName', filterable: true },
];

const rows = [
  { id: '1', firstName: 'Ada', lastName: 'Lovelace' },
  { id: '2', firstName: 'Grace', lastName: 'Hopper' },
];

export const view = () => html`<owc-table .columns=${columns} .data=${rows}></owc-table>`;

Every reference page follows the same pattern: pick a component from the component index, copy the smallest demo that matches your use case, and replace the demo data with application data.

Quick start

From install to rendered table

npm install @open-wc/components

Register an element through its define entry point, then use the tag in any template. Every component page has a copyable demo.

How it works

  1. Install one package

    Unbundled ESM — applications import only the modules they use.

  2. Register the element

    A side-effect import from define/ registers the custom element tag.

  3. Pass data as properties

    Typed .columns, .data, and schema properties drive the rendering.

  4. Theme with CSS

    Style through CSS custom properties — no preprocessor required.