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!

$3

!Glass Components Demo

!Interactive Demo

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

``bash
npm install react-liquid-glass-kit
`

$3

`bash
npm install react react-dom
`

Quick Start

$3

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

function App() {
return (


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

function App() {
return (


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

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

return (


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

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

return (


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

`

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)

$3

Interactive button with glass effects and hover animations.

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

`

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)

$3

Form input with glass styling.

`tsx
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)

$3

Content card with glass effects.

`tsx
title="Card Title"
style={{ width: '300px', padding: '20px' }}
>


Card content goes here

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

$3

Modal dialog with glass effects and backdrop.

`tsx
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Modal Title"
size="medium"
>


Modal content

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

$3

Sidebar with glass effects and configurable position.

`tsx
isOpen={isOpen}
onClose={() => setIsOpen(false)}
position="left"
width="300px"
>


Sidebar Title

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

$3

Radio button with glass styling.

`tsx
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)

$3

Checkbox with glass styling.

`tsx
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)

$3

Chip component with glass effects and optional close button.

`tsx
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)

$3

Toast notification with glass effects and configurable position.

`tsx
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

$3

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

$3

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

$3

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

Advanced Configuration

$3

`tsx
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

`

$3

`tsx
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

`

$3

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

`

Styling Tips

$3

Glass morphism works best with colorful or textured backgrounds:

`css
/ 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);
}
`

$3

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)

$3

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:

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

Testing

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

test('renders glass surface component', () => {
render(



Test Content

`tsx
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 (



Contact Us

`tsx
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 (


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.