Frameworks

If you're using a framework, you shouldn't use the autoloader. Instead, install Quiet via npm and manually import each component as shown in the examples below.

npm install @quietui/quiet

You will need to copy Quiet's dist/assets folder into your app and configure the library path for icons and other assets to work.

import { setLibraryPath } from '@quietui/quiet';

setLibraryPath('/path/to/quiet/dist');

Some frameworks require configuration for them to recognize custom elements. Look for your framework below for more details.

Angular Jump to heading #

Import Quiet components into the root app module and enable the custom elements schema as shown below.

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

// Import one or more Quiet components here
import '@quietui/quiet/components/button/button.js';

@NgModule({
  // ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule {
  // ...
}

Now you can import Quiet components and use them in your Angular app like regular HTML elements.

Vue Jump to heading #

Configure Vue's compiler options to recognize Quiet components.

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Tell Vue that all <quiet-*> elements are custom elements
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('quiet-');

app.mount('#app');

Now you can import Quiet components and use them in your Vue app like regular HTML elements.

<template>
  <quiet-button variant="primary">Click me</quiet-button>
</template>

<script>
import '@quietui/quiet/components/button/button.js';

export default {
  name: 'App',
  // ...
}
</script>

Preact Jump to heading #

Preact plays nicely with custom elements without additional configuration. Just import the component and use it like a regular HTML element.

import { h } from 'preact';
import { useState } from 'preact/hooks';
import '@quietui/quiet/dist/components/button/button.js';

export function Component() {
  return (
    <quiet-button variant="primary">Click me</quiet-button>
  );
}

SolidJS Jump to heading #

SolidJS plays nicely with custom elements without additional configuration. Just import the component and use it like a regular HTML element.

import '@quietui/quiet/components/button/button.js';

function App() {
  return (
    <quiet-button variant="primary">
      Click me
    </quiet-button>
  );
}

export default App;

Svelte Jump to heading #

Svelte plays nicely with custom elements without additional configuration. Just import the component and use it like a regular HTML element.

<script>
  import '@quietui/quiet/components/button/button.js';
</script>

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

React Jump to heading #

React 18 and below is harder to work with because:

React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.

React also struggles with native events:

Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.

While it's possible to use custom elements in React 18, the experience is less than optimal. The story is improving, however, as React 19 has added full support for custom elements.

To improve the experience today, some custom element libraries provide wrappers for React, but supporting legacy frameworks isn't an objective of this project. If you need to use Quiet with React 18 or below, consider using this utility for a more idiomatic experience.