✨ React Liquid

Apple-style Liquid Glass (Glassmorphism) UI Components for React

React Liquid is a modern React component library that brings iOS/macOS-inspired frosted glass UI to the web.
It focuses on clean translucency, subtle depth, and beautiful motion --- without being flashy or overdesigned.

Think: Apple glass materials, not neon cyberpunk.

---

🌊 Preview

Liquid, frosted surfaces with soft blur, crisp borders, calm shadows, and specular highlights.

Best used on gradient, image, or vibrant backgrounds.

---

✨ Features

• 🍎 Apple-style glassmorphism
• ⚛️ React 18 + TypeScript
• ♿ Accessible by default
• 🎛️ Highly composable
• 🌓 Automatic light / dark mode
• 🧊 Motion-aware
• 🧪 Tested
• 📦 Tree-shakable & lightweight
• 💅 Pure CSS glass material

---

📦 Installation

npm install react-liquid

---

🚀 Quick Start

import "react-liquid/styles.css";
import { GlassCard, GlassButton } from "react-liquid";

export default function App() {
  return (
    <GlassCard>
      <h2>Liquid Glass</h2>
      <GlassButton>Get Started</GlassButton>
    </GlassCard>
  );
}

---

🧩 Components

Core - GlassSurface - GlassCard - GlassDivider - GlassNavbar

Controls - GlassButton - GlassInput - GlassTabs - GlassBadge

Overlays - GlassModal - GlassTooltip - GlassToastProvider

---

🎨 Design Philosophy

Inspired by Apple's Human Interface Guidelines: - Calm translucency - Subtle depth - Clean borders - Minimal glow - Premium feel

---

🛠️ Development

npm run dev
npm run build

---

⭐ If you like this project, consider starring it on GitHub.