Browser-first • Zero dependencies

One component library.
Every framework. Every browser.

UWC Components are built on the browser platform — native dialog, popover, and popovertarget APIs under the hood — wrapped in Lit for a lean, reactive authoring experience that drops into any stack.

Browse components View on GitHub

Works everywhere you do

Write your component once. Use it in any framework — or none at all.

Lit

Native .prop and @event binding out of the box

React

Drop-in JSX — works with React 18 and React 19

Angular

[prop] binding and (event) listeners, signals-ready

Vue

:prop and @event — Vue's template syntax just works

Get started in seconds

Drop it in plain HTML — no build step required.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uwckit/layouts/dist/preflight.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uwckit/components/dist/themes/index.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@uwckit/components/dist/index.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@uwckit/layouts/dist/index.js"></script>

<uwc-button variant="primary">Click me</uwc-button>
<uwc-dropdown placeholder="Select..."></uwc-dropdown>

Built on the browser platform

No polyfill soup. No virtual DOM. UWC reaches directly for primitives the browser already ships.

dialog API

Modals and dialogs use the native <dialog> element — proper focus trapping, backdrop, and ESC dismiss with zero JS overhead.

popover API

Tooltips, dropdowns, and menus use the native Popover API — top-layer rendering, light-dismiss, and no z-index wars.

popovertarget wiring

Trigger elements use popovertarget / popovertargetaction so panels open without a single line of JavaScript.

CSS Anchor positioning

Overlay placement is driven by CSS Anchor Positioning — no JS layout calculations, smooth browser-native repositioning.

One codebase. Every output.

The same uwc-* tag works identically in every framework — no separate Angular build, no React adapter, no maintenance tax. 

// Lit — property and event binding
html`<uwc-dropdown .options=${this.options} @uwc-change=${this.onChange}></uwc-dropdown>`

// Angular — [prop] and (event)
// <uwc-dropdown [options]="options" (uwc-change)="onChange($event)"></uwc-dropdown>

// Vue — :prop and @event
// <uwc-dropdown :options="options" @uwc-change="onChange"></uwc-dropdown>

// React 19 — direct JSX
// <uwc-dropdown options={options} onUwcChange={onChange} />

Everything you'd expect, and then some

Design tokens

Fully themeable via CSS custom properties. Swap between Default, Material, Fluent, and M3 themes at runtime.

Dark mode

Light and dark themes built in. Toggle with a single class attribute — no extra CSS required.

Accessible

ARIA roles, keyboard navigation, and focus management built in. Meets WCAG 2.1 AA out of the box.

TypeScript-first

Every component ships with full typings and a Custom Elements Manifest. Autocomplete everywhere.

Tiny footprint

Lit runtime is ~6 KB. Tree-shake individual components for minimal bundles on any build tool.

CDN ready

Use via npm or drop a script tag — no bundler, no build step, no configuration required.

Ready to build?

Pick a component and start in minutes.

Get started