@uwckit/components

v0.1.8

Published

2 days ago

A production-grade Lit-based web component library for every framework.

0High
0Medium
0Low

rajkeshwar

web-components lit uwc design-system custom-elements

UWC Components

A framework-agnostic web component library built with Lit, designed with production-grade feature depth. Works natively in every browser — no framework required.

Live Demo →

Why Web Components?

Web components are native browser standards. Unlike framework-specific component libraries, UWC Components:

Work everywhere — React, Vue, Angular, Svelte, SolidJS, Qwik, Astro, or plain HTML. Write once, use in any stack.
No framework lock-in — Your components survive framework migrations. Switch from React to Vue? Your <uwc-button> still works.
Native browser features — Built on the actual platform: Popover API, native <dialog>, popovertarget, CSS custom properties, and Shadow DOM encapsulation.
Zero runtime overhead — No virtual DOM diffing. Components render directly to real DOM via efficient Lit templates.
Semantic HTML & W3C standards — Every component uses correct semantic elements (<button>, <dialog>, <nav>, <ul>) with full ARIA support and WCAG 2.1 AA compliance.
CSS isolation — Shadow DOM prevents style leakage in both directions. Your global CSS cannot accidentally break a component, and component styles cannot pollute your page.
Future-proof — Web components are a W3C standard. They will work in browsers for decades, with or without Lit, npm, or any build tool.

Features

33 production-ready components — Forms, overlays, navigation, data, media, and more
React wrappers — First-class React support via @lit/react
4 themes — Default, Material, Fluent, M3 Material — switchable at runtime
Full TypeScript — Complete .d.ts declarations for every component
Custom Elements Manifest — IDE autocompletion, Storybook integration, web-component-analyzer support
Accessible by default — Keyboard navigation, focus management, ARIA roles on every interactive element
Tree-shakeable — Import only the components you use

Components

| Category | Components | |---|---| | Forms | AutoComplete, Checkbox, ColorPicker, DatePicker, Dropdown, InputText, Listbox, RadioButton, Rating, Textarea, ToggleButton, ToggleSwitch | | Button | Button, Icon | | Overlay | Dialog, Overlay, Popover, Tooltip | | Menu | Menu | | Panel | Accordion, Panel, Splitter, Stepper, Tabs, VirtualScroller | | Data | DataTable | | Messages | Message, Toast | | Media | Card, Carousel, Galleria |

Installation

npm / pnpm / yarn

npm install @uwckit/components

pnpm add @uwckit/components

yarn add @uwckit/components

Peer dependencies — lit is required. react and @lit/react are required only if using React wrappers.

npm install lit
# React users only:
npm install react @lit/react

CDN — no build tools required

<!-- Theme (pick one, or use index.css for all themes bundled) -->
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/index.css">

<!-- All components -->
<script type="module" src="https://unpkg.com/@uwckit/components/dist/index.js"></script>

Usage

Vanilla HTML / CDN

No imports, no build step — just add the script tag and use the elements:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/index.css">
  <script type="module" src="https://unpkg.com/@uwckit/components/dist/index.js"></script>
</head>
<body>

  <uwc-button variant="primary">Click me</uwc-button>

  <uwc-dialog id="my-dialog" header="Hello">
    <p>This uses the native &lt;dialog&gt; element under the hood.</p>
  </uwc-dialog>

  <!-- Native popovertarget wiring — no JavaScript needed -->
  <uwc-button popovertarget="my-popover">Open Popover</uwc-button>
  <uwc-popover id="my-popover">Popover content</uwc-popover>

  <script>
    customElements.whenDefined('uwc-dialog').then(_ => {
      document.querySelector('uwc-dialog').show()
    });
  </script>

</body>
</html>

Import all components (npm)

import '@uwckit/components';
import '@uwckit/components/dist/themes/index.css';

Import individual components (tree-shakeable)

import '@uwckit/components/button';
import '@uwckit/components/dropdown';
import '@uwckit/components/dialog';

React

npm install @uwckit/components lit react @lit/react

Import all React wrappers

import { UwcButton, UwcDropdown, UwcDialog } from '@uwckit/components/react';
import '@uwckit/components/dist/themes/index.css';

export default function App() {
  return (
    <UwcButton variant="primary" onClick={() => alert('clicked!')}>
      Click me
    </UwcButton>
  );
}

Import per-component React wrapper

import { UwcDropdown } from '@uwckit/components/dropdown/react';

const options = [
  { label: 'Apple',  value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry' },
];

export default function MyForm() {
  return (
    <UwcDropdown
      options={options}
      placeholder="Pick a fruit"
      onUwcChange={e => console.log(e.detail.value)}
    />
  );
}

Vue

npm install @uwckit/components lit

<template>
  <uwc-button variant="primary" @uwc-click="handleClick">
    Click me
  </uwc-button>

  <uwc-dialog ref="dialog" header="Confirm">
    <p>Are you sure?</p>
    <uwc-button slot="footer" @uwc-click="close">Close</uwc-button>
  </uwc-dialog>
</template>

<script setup>
import '@uwckit/components';
import '@uwckit/components/dist/themes/index.css';
import { ref } from 'vue';

const dialog = ref(null);
function handleClick() { dialog.value.show(); }
function close()       { dialog.value.hide(); }
</script>

Tip: In vite.config.ts, add compilerOptions: { isCustomElement: tag => tag.startsWith('uwc-') } to silence Vue custom element warnings.

Angular

npm install @uwckit/components lit

In app.module.ts, add CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@uwckit/components';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

In your template:

<uwc-button variant="primary" (uwc-click)="onClick()">Click me</uwc-button>

<uwc-datepicker
  placeholder="Select date"
  (uwc-change)="onDateChange($event)">
</uwc-datepicker>

Svelte

npm install @uwckit/components lit

<script>
  import '@uwckit/components';
  import '@uwckit/components/dist/themes/index.css';
</script>

<uwc-button variant="primary" on:uwc-click={() => alert('clicked!')}>
  Click me
</uwc-button>

<uwc-toast id="toast"></uwc-toast>

Themes

Four built-in themes, switchable at runtime via the data-uwc-theme attribute on <html>:

<!-- Default (no attribute needed) -->
<html>

<!-- Material Design -->
<html data-uwc-theme="material">

<!-- Microsoft Fluent -->
<html data-uwc-theme="fluent">

<!-- Material Design 3 -->
<html data-uwc-theme="m3-material">

Load themes individually (CDN)

<!-- All themes in one file -->
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/index.css">

<!-- Or load only what you need -->
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/default.css">
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/material.css">
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/fluent.css">
<link rel="stylesheet" href="https://unpkg.com/@uwckit/components/dist/themes/m3-material.css">

Load themes individually (npm)

import '@uwckit/components/themes/default.css';
// or
import '@uwckit/components/themes/material.css';

Switch theme programmatically

document.documentElement.setAttribute('data-uwc-theme', 'material');

Native Browser Features

UWC Components are built on web platform primitives, not JavaScript workarounds:

| Feature | How it's used | |---|---| | Native <dialog> | uwc-dialog wraps the real HTMLDialogElement — proper focus trapping, ::backdrop, Escape key built-in | | Popover API | uwc-popover, uwc-tooltip, uwc-overlay use the native popover attribute — top-layer stacking, no z-index hacks | | popovertarget | Trigger any overlay directly from HTML with popovertarget="my-id", zero JS required | | CSS Custom Properties | All design tokens are CSS variables — override any value without touching component internals | | Shadow DOM | Complete style encapsulation — your CSS and the component's CSS never conflict | | <slot> | Compose component content with native slots — no render props, no children patterns | | Form participation | Form-associated components work with native <form> submission and constraint validation |

TypeScript

Full type definitions are included. No @types/* package needed:

import type { UwcButton } from '@uwckit/components/button';
import type { SelectOption } from '@uwckit/components';

const options: SelectOption[] = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b' },
];

CDN Reference

| File | Description | |---|---| | dist/index.js | All components, Lit bundled in — use this for CDN | | dist/react.js | All React wrappers (Lit external) | | dist/themes/index.css | All 4 themes bundled | | dist/themes/default.css | Default theme only | | dist/themes/material.css | Material Design theme | | dist/themes/fluent.css | Microsoft Fluent theme | | dist/themes/m3-material.css | Material Design 3 theme | | dist/<name>/index.js | Individual component (Lit external) | | dist/<name>/react.js | Individual React wrapper |

jsDelivr

https://cdn.jsdelivr.net/npm/@uwckit/components/dist/index.js
https://cdn.jsdelivr.net/npm/@uwckit/components/dist/themes/index.css

unpkg

https://unpkg.com/@uwckit/components/dist/index.js
https://unpkg.com/@uwckit/components/dist/themes/index.css