Liquid Glass React Components

Professional liquid glass React components featuring Apple's signature frosted glass effects. Create stunning React applications with dynamic refraction, edge bending, and customizable blur using our liquid glass React library.

Get Started View on GitHub

Liquid Glass React Examples

Experience the beauty and versatility of liquid glass React components in action

Liquid Glass React Card Components - Glass Effect Examples

Glass Card Component

Elegant user profile cards with translucent glass effects, perfect for modern dashboards and social applications.

Liquid Glass React Button Components - Interactive Glass Effects

Glass Button Styles

Minimalist glass buttons that blend seamlessly with any background, providing subtle yet engaging interactions.

Liquid Glass React Interactive Demo - Real-time Parameter Controls

Interactive Controls

Real-time parameter adjustments for displacement, blur, saturation, and aberration effects.

Liquid Glass React Features

Comprehensive liquid glass React capabilities that bring Apple's design vision to your React applications

🔄 Proper Edge Bending & Refraction

Our liquid glass React components accurately simulate light bending at glass edges, creating realistic depth and dimension that matches Apple's implementation in React applications.

🎯 Multiple Refraction Modes

Liquid glass React offers four refraction modes - standard, polar, prominent, and shader. Switch modes dynamically using React props to match your design aesthetic.

❄️ Configurable Frosty Level

Fine-tune the frost effect in your liquid glass React components from crystal clear to heavily frosted using simple React props, adapting to different content visibility needs.

⚛️ React Hooks Integration

Use the custom useLiquidGlass hook to manage liquid glass React state effortlessly. Integrates perfectly with useEffect for dynamic animations and useState for interactive parameter control.

🚀 Server-Side Rendering (SSR)

Liquid glass React components work seamlessly with Next.js and other SSR frameworks. Automatic client-side hydration ensures your glass effects render perfectly on both server and client.

🎭 Animation Libraries Integration

Animate liquid glass React props with popular React animation libraries. Full support for Framer Motion, React Spring, and GSAP for creating stunning glass effect transitions.

Install Liquid Glass React

Get started with liquid glass React components in minutes

Using npm

npm install liquid-glass-react

Using yarn

yarn add liquid-glass-react

TypeScript Support

Liquid Glass React comes with built-in TypeScript declarations, providing full type safety and IntelliSense support out of the box.

Liquid Glass React Usage Examples

Learn how to implement liquid glass React components in your applications

Basic Usage

import LiquidGlass from 'liquid-glass-react'

function App() {
  return (
    <LiquidGlass>
      <div className="p-8">
        Your content here
      </div>
    </LiquidGlass>
  )
}

Advanced Configuration

<LiquidGlass
  displacementScale={100}
  blurAmount={0.08}
  saturation={180}
  elasticity={0.2}
  mode="prominent"
  cornerRadius={24}
  className="custom-glass"
>
  <Card title="Premium Content">
    <p>This card has enhanced glass effects</p>
  </Card>
</LiquidGlass>

Different Modes

// Standard mode - balanced effect
<LiquidGlass mode="standard">
  <Content />
</LiquidGlass>

// Polar mode - circular distortion
<LiquidGlass mode="polar">
  <Content />
</LiquidGlass>

// Prominent mode - stronger refraction
<LiquidGlass mode="prominent">
  <Content />
</LiquidGlass>

// Shader mode - custom shader effects
<LiquidGlass mode="shader">
  <Content />
</LiquidGlass>

Liquid Glass React Props API

Complete liquid glass React components reference with all available props and configurations

Prop	Type	Default	Description
`children*`	`ReactNode`	`-`	The content to be wrapped with the liquid glass effect
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Adjusts the blur/frosting level of the glass effect
`saturation`	`number`	`140`	Color saturation percentage
`elasticity`	`number`	`0.15`	Controls the "liquid" feel and elasticity of the effect
`cornerRadius`	`number`	`999`	Border radius in pixels
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode that determines the visual style
`className`	`string`	`-`	Additional CSS classes for styling
`style`	`CSSProperties`	`-`	Inline styles for the component

Browser Compatibility

Support across modern browsers with graceful fallbacks

Browser	Support Level	Notes
Chrome / Edge	Full Support	All effects work perfectly
Safari	Partial Support	Displacement effects may not be visible
Firefox	Partial Support	Displacement effects may not be visible

Note: The library includes automatic fallbacks for unsupported features, ensuring a good user experience across all browsers.

Liquid Glass React FAQ

Common questions about implementing liquid glass React components

Yes! Liquid glass react works perfectly with Next.js and the entire React ecosystem. Since liquid glass react uses client-side effects, make sure to add the 'use client' directive at the top of React components that use our liquid glass react library.

Liquid glass react integrates seamlessly with:

Next.js App Router: Full compatibility with server components
React Server Components: Proper client/server boundaries
TypeScript: Built-in type definitions for excellent developer experience

Liquid glass react components respond beautifully to prop changes, making animations smooth and performant:

Using React State:

const [blur, setBlur] = useState(0.06);
<LiquidGlass blurAmount={blur}>Content</LiquidGlass>

Popular React Animation Libraries:

Framer Motion: Perfect for liquid glass react prop animations
React Spring: Smooth transitions for liquid glass react parameters
React Transition Group: Great for mounting/unmounting liquid glass react components

All liquid glass react props can be animated in real-time.

Liquid glass react is optimized for excellent performance in React applications:

GPU-accelerated rendering: Uses hardware-accelerated SVG filters
React-optimized: Efficient prop updates and re-rendering
Minimal bundle size: Lightweight liquid glass react library
Memory efficient: Proper React cleanup and lifecycle management

For optimal performance, limit to 3-5 liquid glass react components per page. Use React's useMemo and useCallback for expensive prop calculations.

Liquid glass react provides several React-specific optimization strategies for mobile:

Using React Hooks for Detection:

const isMobile = useMediaQuery('(max-width: 768px)');
<LiquidGlass
  displacementScale={isMobile ? 30 : 70}
  blurAmount={isMobile ? 0.03 : 0.06}
>

React Performance Tips:

Use React.memo to prevent unnecessary re-renders
Implement conditional rendering based on device capabilities
Leverage React's useEffect for device-specific optimizations

Yes! Liquid glass react offers flexible mouse tracking options designed for React applications:

Automatic Tracking (default):
<LiquidGlass>Content tracks mouse automatically</LiquidGlass>

Custom React Hook Integration:

const mousePos = useMousePosition();
<LiquidGlass
  manualTracking
  mouseX={mousePos.x}
  mouseY={mousePos.y}
>

This makes liquid glass react perfect for custom React interaction patterns and advanced mouse-based animations.

Liquid glass react has excellent cross-browser compatibility with React applications:

Chrome, Edge, Safari: Full liquid glass react feature support with optimal performance
Firefox: Most liquid glass react effects supported with minor limitations on displacement mapping
Older browsers: Automatic fallbacks ensure graceful degradation

Our liquid glass react library automatically detects browser capabilities and adjusts rendering accordingly. All React features like hooks, context, and lifecycle methods work perfectly across supported browsers.

Liquid Glass React Resources

Everything you need to master liquid glass React components and effects

GitHub Repository

Source code, issues, and contributions. Star the repo to show your support!

Live Demo

Interactive playground to experiment with all parameters and see results in real-time

NPM Package

Package details, version history, and download statistics

API Documentation

Comprehensive API reference with detailed examples and best practices

Ready to Add Glass Effects to Your React App?

Start building beautiful, Apple-inspired interfaces with liquid glass effects today

Get Started Try Live Demo