Liquid GlassExamples
Liquid GlassExamples
ES Module (Bundlers)
Using Liquid Glass with Vite, Webpack, or Rollup.
ES Module (Bundlers)
For modern projects, you'll likely use a bundler. Here is how to set up Liquid Glass.
Installation
npm install @avenra/liquid-glassUsage Example
In your main entry file (e.g., main.js or app.js):
// 1. Import the styles
import '@avenra/liquid-glass/styles';
// 2. Import named exports
import { createLiquidSlider, createLiquidSwitch } from '@avenra/liquid-glass';
// 3. Initialize components
const slider = createLiquidSlider('#volume', { value: 70 });
const toggle = createLiquidSwitch('#power');
// 4. Handle events
slider.on('change', ({ value }) => {
console.log('Final volume set to:', value);
});
// 5. Cleanup (if using a SPA with manual mounting/unmounting)
// slider.destroy();
// toggle.destroy();Tree Shaking
Liquid Glass is built as a tree-shakeable ESM package. Only the components you import will be included in your final bundle.