Liquid Glass Component Library

The Liquid Glass Component Library is an innovative collection of React components that delves into the realm of glassmorphism and Liquid Glass effects reminiscent of Apple's design aesthetics. This library is the result of an exploration into how closely traditional frosted glass can be replicated using React, Tailwind CSS, SVG filters, and Framer Motion.

Features

• Glass Mode: Offers classic frosted glass effects with customizable options for blur, transparency, and saturation.
• Liquid Glass Mode: An experimental refractive effect inspired by kube.io's Liquid Glass research. While Glass Mode provides practicality, Liquid Glass pushes the boundaries of what is achievable in a browser environment.
• Adaptive Themes: Supports both dark and light themes with user preference persistence.
• Dynamic Motion: Utilizes spring-driven motion animations powered by Framer Motion.

Tech Stack

This component library is built using the following technologies:

• React 19 + TypeScript 5.9
• Vite 7
• Tailwind CSS 4.1
• Framer Motion
• lucide-react

Component Overview

The library comprises over 70 components categorized as follows:

Glass System Configuration

The library offers flexible controls for adjusting glass properties in two modes:

Glass Mode

Liquid Glass Mode

Usage Example

To implement a component from the library:

import { LiquidGlassButton, LiquidGlassCard, LiquidGlassModal } from "liquid-glass";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <LiquidGlassCard className="p-6">
      <h2 className="text-xl font-semibold text-[var(--lg-text)]">Hello Glass</h2>
      <LiquidGlassButton onClick={() => setOpen(true)}>Open modal</LiquidGlassButton>
      <LiquidGlassModal open={open} onClose={() => setOpen(false)} title="Demo">
        This surface adapts to your glass settings automatically.
      </LiquidGlassModal>
    </LiquidGlassCard>
  );
}

Additional Information

While this repository is primarily a personal endeavor focused on experimentation and learning, it is envisioned as a potential foundation for a more robust glass UI library in the future, inspired by existing projects from notable sources like Shadcn UI and Ionic.