React Liquid Glass

Bring a beautiful, iOS-style liquid glass effect to your React web apps using this lightweight and customizable component. Inspired by iOS 26's blurred, frosted design, it adds depth and motion using SVG distortion and CSS glassmorphism.

✨ Features

• Liquid distortion using SVG filters
• Smooth glassmorphism look with customizable blur, tint, and radius
• Easy-to-use wrapper component
• Works with Tailwind or plain CSS
• No runtime dependencies

📦 Install

npm install react-liquid-glass

Usage

import GlassEffect from 'react-glass-effect';
import 'react-glass-effect/dist/index.css';

function App() {
  return (
    <GlassEffect className="w-96 p-6 text-white">
      <h2>Hello Glass</h2>
    </GlassEffect>
  );
}

License

MIT

Bonus: Test It Locally Before Publishing

In your test app:

npm link ../react-glass-effect

1. Build the library:

   cd ../react-glass-effect
   npm run build

2. Link the package:

   npm link

3. In your test app directory, link the package:

   npm link react-glass-effect

4. Import and use the component as shown above.