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.

Astro

Astro has two ways to render components: Server-Side Rendering (SSR) and Client Side Rendering. Kemet UI components work with both, but there are some considerations.

Client-Side Rendering

This is by far the most straight forward way to use Kemet UI components in Astro. When rendering on the client your component uses standard Web Component APIs. Just import the element in a script tag and write the HTML of the element. The component will be rendered with JavaScript on the client. An example can be found here.

Server-Side Rendering (SSR)

SSR is more complicated to work with but you get added benefits like SEO and faster initial page loads. To render Kemet UI elements on the server, you’ll need to convert the Lit component to Declarative Shadow DOM. This can be done with an experimental package from the Lit team. Checkout our implementation of converting here.

You can use the litToDSD function to convert your Lit components to Declarative Shadow DOM. This function takes a Lit component and returns a Declarative Shadow DOM component. You can see it in action here.

Take note that, because the drawer has slotted content, you’ll need render the HTML output of your slots and or componenets in Astro and pass them appropriately.

The gods are nature. Nature is completely free.

Version 5.0.4

2026 Deific Arts