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

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

Best used on gradient, image, or vibrant backgrounds.

• 🍎 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

npm install react-liquid

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>
 );
}

Core - GlassSurface - GlassCard - GlassDivider - GlassNavbar

Controls - GlassButton - GlassInput - GlassTabs - GlassBadge

Overlays - GlassModal - GlassTooltip - GlassToastProvider

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

npm run dev
npm run build

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