Liquid GlassGetting Started
Liquid GlassGetting Started
Quick Start
Get up and running with Liquid Glass in minutes.
Quick Start
Here are three ways to get started with Liquid Glass quickly.
A) npm / ESM Import
Use this method in modern JavaScript environments.
import { createLiquidButton } from '@avenra/liquid-glass';
// Create a liquid button on an existing element
const btn = createLiquidButton('#myBtn', { label: 'Save' });
// Listen for events
btn.on('click', (e) => console.log('Button clicked!', e));B) CDN / UMD Script Tag
Perfect for plain HTML files without a build step.
<script src="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/dist/liquid-glass.umd.min.js"></script>
<script>
const { createLiquidSlider } = LiquidGlass;
createLiquidSlider('#vol', { min: 0, max: 100, value: 50 })
.on('input', ({ value }) => console.log('Slider value:', value));
</script>C) Zero-JS Data-Attribute Init
Liquid Glass can automatically initialize elements marked with specific data attributes.
<!-- Define components in HTML -->
<button data-liquid-button data-label="Subscribe"></button>
<div data-liquid-switch data-checked="true"></div>
<!-- Initialize all components at once -->
<script>
LiquidGlass.init();
</script>The init() function scans the DOM for any data-liquid-* attributes and wires them up automatically with default settings.