Getting started›Frameworks

Frameworks

It is a regular HTML tag, so every framework can render it. Import the definition once at the entry of your app.

React

React 19 passes attributes and properties to custom elements as they are.

import "@edinstvo/glass/define";

export function Card() {
  return <edinstvo-glass frost="0.4" jelly="0.8">Hello</edinstvo-glass>;
}

Vue

Tell the compiler that the tag isn't a Vue component.

vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("edinstvo-") } } })

Svelte

Nothing to set up, use the tag as it is.

Server rendering

Importing the package on the server is safe, but the definition needs a browser. Load @edinstvo/glass/define on the client. Until then the tag is an empty box with your CSS.

TypeScript

Types ship with the package: Material, Motion, GlassOptions and GlassSource.

Browsers

Anything with WebGL 2: current Chrome, Edge, Firefox and Safari, and the webviews inside Tauri and Electron. Without it the element falls back to backdrop-filter.