Installation

You can integrate Liquid Glass into your project using several methods, depending on your environment.

1. Package Manager (npm / yarn / pnpm)

For modern web applications using bundlers like Vite, Webpack, or Rollup, install the package via npm:

npm install @avenra/liquid-glass

2. CDN (UMD Build)

For plain HTML projects or quick prototyping, you can include the library via a script tag. All exports will be available on the global LiquidGlass object.

<script src="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/dist/liquid-glass.umd.min.js"></script>

3. CSS Requirement

Liquid Glass requires a small CSS file for the built-in components to render correctly. You can include it via CDN or import it in your JavaScript/CSS files.

Via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/styles" />

Via npm:

import '@avenra/liquid-glass/styles';