Framework Integrations

React

React 19 finally ships with out of the box support for Web Components. This means that you can use Kemet UI components in React without wrappers.

Reactbox is a React sandbox that demonstrates how to use Kemet UI components in React 19 and newer. Check it out.

Notice that the components were simply imported then then the Web Component’s API was used in the App.tsx. On line 15 you’ll see an event.

onkemet-drawer-opened={() => setIsDrawerOpened(true)}

The name of the event in Kemet UI is kemet-drawer-opened. In React 19 and newer, just prepend on to your event name and work with them like you would regular synthetic React events like onClick.

JSX Support

To get your editor to recognize Kemet UI elements in JSX, you can use the kemet-ui/types/jsx package and import it into your global.d.ts file:

import 'kemet-ui/types/jsx';

React Legacy

React 18 and older has issues with Web Components. Since v4, Kemet UI ships with wrappers for React (Legacy).

Reactbox is a React sandbox that demonstrates how to use Kemet UI components in React 18 and older. Check it out.

Just import the wrapper at kemet-ui/react/[component-name] and use it as a React component. Every wrapper will have a have a event mapped to it as a callback that replaces kemet-[component-name]- with on and camel cases the rest. So for example, the event kemet-drawer-opened becomes onOpened.

Angular

Enabling Web Component in Angular is easy. The only thing you have to do is turn on CUSTOM_ELEMENTS_SCHEMA. After that, you can use Web Components like any other component.

Angularbox is a Angular sandbox that demonstrates how to use Kemet UI components in Angular. Check it out.

Notice that in src/index.ts we’ve imported CUSTOM_ELEMENTS_SCHEMA and used it in @Component.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@Component({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

That’s it. You can now use the Web Component.

Handling Custom Events in Angular

To handle events in Angular use HostListener. Simply give the first argument of HostListener the name of the event you want to listen to. You can read more on HostListener in the Angular docs.

import { Component, HostListener } from '@angular/core';
import 'kemet-ui';
...
export class AppComponent  {
  @HostListener('kemet-dialog-closed', ['$event.target'])
  onClose(dialog) {
    console.log(dialog);
    this.isDrawerOpened = false;
  }

  isDrawerOpened = false;

  openDrawer() {
    this.isDrawerOpened = true;
  }
}

The second argument simply captures the element that triggered the event (the dialog) and we log it to the console just as an example of this.

Vue

Vue has excellent support for Web Components. There is noting special needed to get Vue to support them.

Vuebox is a Vue sandbox that demonstrates how to use Kemet UI components in Vue. Check it out.

Notice that everything is standard Vue code. The only other thing to note here is that the vite.config.ts files has code that allows the compiler to recognize Kemet UI Web Components. That’s it.

Alpine

With AlpineJS, you work with Web Components as if it was standard HTML and JavaScript.

Alpinebox is a Alpine sandbox that demonstrates how to use Kemet UI components in Alpine. Check it out.

Next 15+ ships with React 19+ which has native support for Web Components. The only thing to note here is that you need to make sure the web component is loded on the client. SSR support is out of scope for this documentation.

Nextbox is a Next sandbox that demonstrates how to use Kemet UI components in Next. Check it out.

JSX Support

To get your editor to recognize Kemet UI elements in JSX, you can use the kemet-ui/types/jsx package and import it into your global.d.ts file:

import 'kemet-ui/types/jsx';

Svelte

Svelte has excellent support for Web Components.

Sveltebox is a Svelte sandbox that demonstrates how to use Kemet UI components in Svelte. Check it out.

Lit

Lit supports Web Components natively. This simply documents some examples on how to use Kemet UI in a Lit application.

Litbox is a Lit sandbox that demonstrates how to use Kemet UI components in Lit. Check it out.

Solid

Solid has excellent support for Web Components. The only thing to consider is that because Solid uses JSX, you’ll need to get JSX to recognize the Web Component.

Solidbox is a Solid sandbox that demonstrates how to use Kemet UI components in Solid. Check it out.

JSX Support

To get your editor to recognize Kemet UI elements in JSX, you can use the kemet-ui/types/solid package and import it into your global.d.ts file:

import 'kemet-ui/types/jsx';

Marko

Marko has excellent support for Web Components. The caveat is that because Marko uses it’s own tag system, you need to tell Marko to use native html for every Kemet UI element. You can do this but adding a file name marko.json at the root of your project. For every element add:

{
  "<kemet-button>": { "html": true},
}

Markobox is a Marko sandbox that demonstrates how to use Kemet UI components in Marko. Check it out.

The gods are nature. Nature is completely free.

Version 5.0.0

2026 Deific Arts