React Glassy

A React library for creating beautiful liquid glass morphism effects with customizable presets.

Features

• 🎨 Beautiful glass morphism effects
• ⚙️ Customizable presets and configuration
• 🎭 Built-in SVG filters for distortion effects
• 🔍 LensGlass — physics-based lens refraction with geometry-aware displacement maps
• 🪟 EdgeGlass — edge-only refraction (undistorted center), size-independent filters
• 🚀 Easy to use and lightweight
• 📦 TypeScript support

Installation

npm install react-glassy
# or
pnpm add react-glassy
# or
yarn add react-glassy

Quick Start

import { SVGFilters, LiquidGlass } from "react-glassy";
import "react-glassy/styles.css";

function App() {
  return (
    <>
      <SVGFilters>
        <SVGFilters.DefaultFilters />
      </SVGFilters>

      <LiquidGlass preset="frost">
        <div>Your content here</div>
      </LiquidGlass>
    </>
  );
}

Documentation

Visit docs

License

MIT © zeroqs