React Glassy

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.

Installation

Install React Glassy using your preferred package manager:

npm install react-glassy

Import 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.

Quick Start

Installation

Import Styles

Basic Example

Wow

On this page