Quick Start
Get started with React Glassy in your project
React Glassy is a React library for creating beautiful liquid glass morphism effects. It provides customizable glass components with built-in presets, SVG filters, and real-time configuration options.
Browser Compatibility
SVG filters work in Chromium only. React Glassy uses filter: url(#...) to apply
distortion effects. This works in Chrome, Edge, and Arc. In Safari, the SVG filter
reference is silently ignored — the glass still renders with blur and tint, but without
the distortion layer.
LensGlass goes further and uses backdropFilter: url(...), which Safari doesn't support
at all — in Safari that component renders as fully transparent.
Safari blur performance — backdrop-filter: blur() in Safari has a known compositor
limitation: the more elements with blur on screen, the worse the frame rate. Chrome and
Firefox handle many blurred elements without this problem.
Installation
Install React Glassy using your preferred package manager:
npm install react-glassyImport Styles
Import the CSS file in your application entry point:
import "react-glassy/styles.css";Basic Example
Here's a minimal example to get you started with either Tailwind or inline styles:
import { SVGFilters, LiquidGlass } from "react-glassy";
import "react-glassy/styles.css";
function App() {
return (
<>
<SVGFilters>
<SVGFilters.DefaultFilters />
</SVGFilters>
<LiquidGlass>
<div className="p-6 text-center">
<h2 className="text-2xl font-semibold mb-2">Wow</h2>
<p className="text-muted-foreground">
This is a default preset glass morphism effect.
</p>
</div>
</LiquidGlass>
</>
);
}Wow
This is a default preset glass morphism effect.