react-liquid-glass-kit

A comprehensive React liquid glass component library with Apple-inspired glass morphism effects. This package provides beautiful, customizable liquid glass components that work seamlessly in React applications with full JSX/TSX support.

Live Demo

View Live Demo

Experience all components in action with interactive examples and real-time customization!

Preview

Features

• Apple-inspired glass morphism effects with advanced backdrop filters and transparency
• Full React support with complete JSX/TSX compatibility
• Responsive design with mobile-optimized effects
• Pre-configured variants (light, medium, heavy, subtle, dramatic)
• Complete component library (Surface, Button, Input, Card, Modal, Sidebar, Radio, Checkbox, Chip, Toast)
• Highly customizable with extensive configuration options
• Interactive effects including hover, active, and disabled states
• Glowing border animations with customizable colors
• TypeScript support with comprehensive type definitions
• CSS-in-JS and CSS variables support
• Cross-browser compatibility with fallbacks

Installation

npm install react-liquid-glass-kit

Peer Dependencies

npm install react react-dom

Quick Start

Basic Glass Surface

import React from 'react';
import { GlassSurface } from 'react-liquid-glass-kit';

function App() {
  return (
    <div style={{ 
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      minHeight: '100vh',
      padding: '20px'
    }}>
      <GlassSurface
        variant="medium"
        style={{ padding: '20px', borderRadius: '16px' }}
      >
        <h2>Glass Surface</h2>
        <p>This is a beautiful glass morphism component!</p>
      </GlassSurface>
    </div>
  );
}

Glass Button with Hover Effects

import React from 'react';
import { GlassButton } from 'react-liquid-glass-kit';

function App() {
  return (
    <div style={{ background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)' }}>
      <GlassButton
        glowColor="white"
        glowEffects={true}
        onClick={() => alert('Button clicked!')}
        style={{ margin: '10px' }}
      >
        Primary Button
      </GlassButton>
      
      <GlassButton
        className="success"
        glowColor="green"
        glowEffects={true}
        style={{ margin: '10px' }}
      >
        Success Button
      </GlassButton>
    </div>
  );
}

Glass Modal

import React, { useState } from 'react';
import { GlassModal, GlassButton } from 'react-liquid-glass-kit';

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <GlassButton onClick={() => setShowModal(true)}>
        Open Modal
      </GlassButton>
      
      <GlassModal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        title="Glass Modal"
      >
        <p>This is a beautiful glass modal with backdrop blur!</p>
        <GlassButton onClick={() => setShowModal(false)}>
          Close
        </GlassButton>
      </GlassModal>
    </div>
  );
}

Glass Sidebar

import React, { useState } from 'react';
import { GlassSidebar, GlassButton } from 'react-liquid-glass-kit';

function App() {
  const [showSidebar, setShowSidebar] = useState(false);

  return (
    <div>
      <GlassButton onClick={() => setShowSidebar(true)}>
        Open Sidebar
      </GlassButton>
      
      <GlassSidebar
        isOpen={showSidebar}
        onClose={() => setShowSidebar(false)}
        position="right"
      >
        <h3>Navigation</h3>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </GlassSidebar>
    </div>
  );
}

Component Library

GlassSurface

The core glass morphism component with customizable effects.

<GlassSurface
  variant="medium"
  blur={20}
  opacity={0.2}
  borderRadius={16}
  style={{ padding: '20px' }}
>
  Content goes here
</GlassSurface>

Props:

• variant: 'light' | 'medium' | 'heavy' | 'subtle' | 'dramatic'
• blur: number (backdrop blur amount)
• opacity: number (background opacity)
• borderRadius: number (border radius)
• style: React.CSSProperties (additional styles)

GlassButton

Interactive button with glass effects and hover animations.

<GlassButton
  glowColor="white"
  glowEffects={true}
  className="primary"
  onClick={() => console.log('clicked')}
>
  Click me
</GlassButton>

Props:

• glowColor: 'white' | 'gray' | 'green' | 'red' | 'blue' (glow color)
• glowEffects: boolean (enable/disable glow animation)
• className: string (button variant: 'primary' | 'secondary' | 'success' | 'danger')
• onClick: () => void (click handler)
• disabled: boolean (disable button)
• style: React.CSSProperties (additional styles)

GlassInput

Form input with glass styling.

<GlassInput
  placeholder="Enter text..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  type="text"
/>

Props:

• placeholder: string (input placeholder)
• value: string (input value)
• onChange: (e: ChangeEvent) => void
• type: string (input type)
• disabled: boolean (disable input)
• style: React.CSSProperties (additional styles)

GlassCard

Content card with glass effects.

<GlassCard
  title="Card Title"
  style={{ width: '300px', padding: '20px' }}
>
  <p>Card content goes here</p>
</GlassCard>

Props:

• title: string (card title)
• style: React.CSSProperties (additional styles)
• children: ReactNode (card content)

GlassModal

Modal dialog with glass effects and backdrop.

<GlassModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  size="medium"
>
  <p>Modal content</p>
</GlassModal>

Props:

• isOpen: boolean (modal visibility)
• onClose: () => void (close handler)
• title: string (modal title)
• size: 'small' | 'medium' | 'large' (modal size)
• children: ReactNode (modal content)

GlassSidebar

Sidebar with glass effects and configurable position.

<GlassSidebar
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  position="left"
  width="300px"
>
  <h3>Sidebar Title</h3>
  <nav>Navigation content</nav>
</GlassSidebar>

Props:

• isOpen: boolean (sidebar visibility)
• onClose: () => void (close handler)
• position: 'left' | 'right' (sidebar position)
• width: string (sidebar width)
• children: ReactNode (sidebar content)

GlassRadio

Radio button with glass styling.

<GlassRadio
  name="option"
  value="value1"
  checked={selected === 'value1'}
  onChange={(e) => setSelected(e.target.value)}
  label="Option 1"
/>

Props:

• name: string (radio group name)
• value: string (radio value)
• checked: boolean (checked state)
• onChange: (e: ChangeEvent) => void
• label: string (radio label)
• disabled: boolean (disable radio)

GlassCheckbox

Checkbox with glass styling.

<GlassCheckbox
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
  label="Check this option"
/>

Props:

• checked: boolean (checked state)
• onChange: (e: ChangeEvent) => void
• label: string (checkbox label)
• disabled: boolean (disable checkbox)

GlassChip

Chip component with glass effects and optional close button.

<GlassChip
  label="Glass Chip"
  onClose={() => console.log('chip closed')}
  variant="primary"
/>

Props:

• label: string (chip text)
• onClose: () => void (close handler, optional)
• variant: 'primary' | 'secondary' | 'success' | 'danger'
• style: React.CSSProperties (additional styles)

GlassToast

Toast notification with glass effects and configurable position.

<GlassToast
  isVisible={showToast}
  onClose={() => setShowToast(false)}
  type="success"
  message="Operation completed successfully!"
  position="top-right"
  duration={3000}
/>

Props:

• isVisible: boolean (toast visibility)
• onClose: () => void (close handler)
• type: 'success' | 'error' | 'warning' | 'info' (toast type)
• message: string (toast message)
• position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
• duration: number (auto-close duration in ms)

Pre-configured Variants

Glass Surface Variants

• light: Subtle glass effect with minimal blur (blur: 8, opacity: 0.1)
• medium: Balanced glass effect (blur: 15, opacity: 0.15) - default
• heavy: Strong glass effect with high blur (blur: 25, opacity: 0.25)
• subtle: Very light glass effect (blur: 5, opacity: 0.08)
• dramatic: Maximum glass effect with strong blur (blur: 30, opacity: 0.3)

Button Variants

• primary: Default white glass button
• secondary: Gray-tinted glass button
• success: Green-tinted glass button
• danger: Red-tinted glass button

Toast Types

• success: Green-tinted success notification
• error: Red-tinted error notification
• warning: Orange-tinted warning notification
• info: Blue-tinted info notification

Advanced Configuration

Custom Glass Properties

<GlassSurface
  blur={20}
  opacity={0.2}
  borderRadius={24}
  backdropFilter="blur(20px) saturate(1.6) brightness(1.1)"
  boxShadow="0 8px 32px rgba(0, 0, 0, 0.12)"
  style={{
    background: 'rgba(255, 255, 255, 0.1)',
    border: '0.5px solid rgba(255, 255, 255, 0.18)'
  }}
>
  Custom glass surface
</GlassSurface>

Button with Custom Glow

<GlassButton
  glowColor="blue"
  glowEffects={true}
  style={{
    background: 'rgba(0, 123, 255, 0.2)',
    border: '0.5px solid rgba(0, 123, 255, 0.4)',
    color: 'white'
  }}
>
  Custom Blue Button
</GlassButton>

Modal with Custom Size

<GlassModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Custom Modal"
  size="large"
  style={{
    maxWidth: '800px',
    borderRadius: '20px'
  }}
>
  Large modal content
</GlassModal>

Styling Tips

Background Requirements

Glass morphism works best with colorful or textured backgrounds:

/* Good backgrounds for glass morphism */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.image-bg {
  background: url('your-image.jpg') center/cover;
}

.pattern-bg {
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}

Hover Effects

All buttons include built-in hover effects:

• Lift animation: translateY(-2px) on hover
• Glowing border: Animated border that moves around the button
• Enhanced glass: Increased blur, saturation, and brightness
• Active state: Pressed effect with translateY(0)

Glow Colors

Available glow colors for buttons:

• white: Default white glow
• gray: Gray glow for secondary buttons
• green: Green glow for success buttons
• red: Red glow for danger buttons
• blue: Blue glow for info buttons

Browser Support

• Chrome 76+
• Firefox 103+
• Safari 9+
• Edge 79+

Note: Backdrop-filter support is required for glass morphism effects. Older browsers will fall back to basic transparency effects.

Responsive Design

The library automatically detects mobile devices and applies optimized settings:

<GlassSurface
  responsive={true}
  mobileBlur={8}      // Lighter blur on mobile
  mobileOpacity={0.1} // Lower opacity on mobile
/>

Testing

import { render, screen } from '@testing-library/react';
import { GlassSurface } from 'react-liquid-glass-kit';

test('renders glass surface component', () => {
  render(
    <GlassSurface data-testid="glass-component">
      <h1>Test Content</h1>
    </GlassSurface>
  );
  
  expect(screen.getByTestId('glass-component')).toBeInTheDocument();
  expect(screen.getByText('Test Content')).toBeInTheDocument();
});

Examples

Complete Form with Glass Components

import React, { useState } from 'react';
import { 
  GlassSurface, 
  GlassInput, 
  GlassButton, 
  GlassRadio, 
  GlassCheckbox 
} from 'react-liquid-glass-kit';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
    preference: 'email',
    newsletter: false
  });

  return (
    <GlassSurface variant="medium" style={{ padding: '30px', maxWidth: '500px' }}>
      <h2>Contact Us</h2>
      
      <GlassInput
        placeholder="Your Name"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        style={{ marginBottom: '15px', width: '100%' }}
      />
      
      <GlassInput
        placeholder="Your Email"
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        style={{ marginBottom: '15px', width: '100%' }}
      />
      
      <GlassInput
        placeholder="Your Message"
        value={formData.message}
        onChange={(e) => setFormData({...formData, message: e.target.value})}
        style={{ marginBottom: '20px', width: '100%', minHeight: '100px' }}
      />
      
      <div style={{ marginBottom: '20px' }}>
        <h4>Preferred Contact Method:</h4>
        <GlassRadio
          name="preference"
          value="email"
          checked={formData.preference === 'email'}
          onChange={(e) => setFormData({...formData, preference: e.target.value})}
          label="Email"
        />
        <GlassRadio
          name="preference"
          value="phone"
          checked={formData.preference === 'phone'}
          onChange={(e) => setFormData({...formData, preference: e.target.value})}
          label="Phone"
        />
      </div>
      
      <GlassCheckbox
        checked={formData.newsletter}
        onChange={(e) => setFormData({...formData, newsletter: e.target.checked})}
        label="Subscribe to newsletter"
        style={{ marginBottom: '20px' }}
      />
      
      <GlassButton
        glowColor="white"
        glowEffects={true}
        onClick={() => console.log('Form submitted:', formData)}
        style={{ width: '100%' }}
      >
        Send Message
      </GlassButton>
    </GlassSurface>
  );
}

Dashboard with Multiple Components

import React, { useState } from 'react';
import { 
  GlassSurface, 
  GlassCard, 
  GlassButton, 
  GlassModal, 
  GlassSidebar,
  GlassToast 
} from 'react-liquid-glass-kit';

function Dashboard() {
  const [showModal, setShowModal] = useState(false);
  const [showSidebar, setShowSidebar] = useState(false);
  const [showToast, setShowToast] = useState(false);

  return (
    <div style={{ 
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      minHeight: '100vh',
      padding: '20px'
    }}>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
        <GlassButton
          glowColor="white"
          glowEffects={true}
          onClick={() => setShowModal(true)}
        >
          Open Modal
        </GlassButton>
        
        <GlassButton
          glowColor="green"
          glowEffects={true}
          onClick={() => setShowSidebar(true)}
        >
          Open Sidebar
        </GlassButton>
        
        <GlassButton
          glowColor="blue"
          glowEffects={true}
          onClick={() => setShowToast(true)}
        >
          Show Toast
        </GlassButton>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px' }}>
        <GlassCard title="Statistics">
          <p>Total Users: 1,234</p>
          <p>Active Sessions: 567</p>
        </GlassCard>
        
        <GlassCard title="Recent Activity">
          <p>User login: 2 minutes ago</p>
          <p>New registration: 5 minutes ago</p>
        </GlassCard>
        
        <GlassCard title="Quick Actions">
          <GlassButton glowColor="green" glowEffects={true} style={{ margin: '5px' }}>
            Add User
          </GlassButton>
          <GlassButton glowColor="blue" glowEffects={true} style={{ margin: '5px' }}>
            View Reports
          </GlassButton>
        </GlassCard>
      </div>
      
      <GlassModal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        title="Settings Modal"
      >
        <p>This is a glass modal with backdrop blur!</p>
        <GlassButton onClick={() => setShowModal(false)}>
          Close
        </GlassButton>
      </GlassModal>
      
      <GlassSidebar
        isOpen={showSidebar}
        onClose={() => setShowSidebar(false)}
        position="right"
      >
        <h3>Navigation</h3>
        <ul>
          <li><a href="#dashboard">Dashboard</a></li>
          <li><a href="#users">Users</a></li>
          <li><a href="#settings">Settings</a></li>
        </ul>
      </GlassSidebar>
      
      <GlassToast
        isVisible={showToast}
        onClose={() => setShowToast(false)}
        type="success"
        message="Operation completed successfully!"
        position="top-right"
        duration={3000}
      />
    </div>
  );
}

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE file for details.

Support

• Documentation
• Issue Tracker
• Discussions

Acknowledgments

Inspired by Apple's design language and the glass morphism trend in modern UI design.