Liquid Glass React Components | npm Package & Documentation for Liquid Glass Effects in React

Installation

Get started with Liquid Glass React components by installing the NPM package and setting up the required imports.

Install Package

npm install @tinymomentum/liquid-glass-react@latest

Import Components and Styles

import {
  LiquidGlassButton,
  LiquidGlassContainer,
  LiquidGlassLink
} from '@tinymomentum/liquid-glass-react';
import '@tinymomentum/liquid-glass-react/dist/components/LiquidGlassBase.css';

Available Components

Three powerful components to create stunning liquid glass effects in your React applications.

LiquidGlassContainer

A versatile container component that applies liquid glass effects to any content. Perfect for cards, panels, and content sections.

LiquidGlassButton

An interactive button component with liquid glass styling. Supports all native button events and properties.

LiquidGlassLink

A stylized link component with liquid glass effects. Maintains all anchor tag functionality while adding beautiful visual effects.

Component Properties

All components share the same customizable properties to control the liquid glass effect appearance.

Want to experience and adjust these properties intuitively? Try the generator!

Property	Type	Default	Description
width	number	300	Width of the component in pixels
height	number	200	Height of the component in pixels
borderRadius	number	28	Border radius in pixels for rounded corners
innerShadowColor	string	'rgba(255, 255, 255, 0.7)'	Color of the inner shadow effect
innerShadowBlur	number	20	Blur radius of the inner shadow in pixels
innerShadowSpread	number	-5	Spread radius of the inner shadow in pixels
glassTintColor	string	'#ffffff'	Base tint color for the glass effect
glassTintOpacity	number	0	Opacity of the glass tint (0-100)
frostBlurRadius	number	0	Blur radius for the frosted glass effect
noiseFrequency	number	0.008	Frequency of the noise distortion effect
noiseStrength	number	77	Strength of the noise distortion effect

Supported Events

All components support their respective native HTML events, maintaining full compatibility with React event handling.

LiquidGlassButton Events

Supports all native button events:

// All button events are supported
onClick, onDoubleClick, onContextMenu
onMouseEnter, onMouseLeave
onMouseDown, onMouseUp
onFocus, onBlur, onKeyDown, onKeyUp

LiquidGlassLink Events

Supports all native anchor events:

// All anchor events are supported
onClick, onAuxClick, onKeyDown
onMouseEnter, onMouseLeave
onFocus, onBlur

Usage Examples

Complete examples showing how to use each component in your React applications.

Basic Container

Use LiquidGlassContainer to wrap any content with liquid glass effects:

import React from 'react';
import { LiquidGlassContainer } from '@tinymomentum/liquid-glass-react';
import '@tinymomentum/liquid-glass-react/dist/components/LiquidGlassBase.css';

function BasicContainer() {
  return (
    <LiquidGlassContainer
      borderRadius={28}
      innerShadowColor="#000000"
      innerShadowBlur={15}
      innerShadowSpread={-5}
      glassTintColor="#ffffff"
      glassTintOpacity={0}
      frostBlurRadius={0}
      noiseFrequency={0.009}
      noiseStrength={99}
    >
      <div className="content">
        <h3>Basic Container Example</h3>
        <p>This is a basic liquid glass container</p>
      </div>
    </LiquidGlassContainer>
  );
}

Interactive Button

Create beautiful interactive buttons with full event support:

import React from 'react';
import { LiquidGlassButton } from '@tinymomentum/liquid-glass-react';
import '@tinymomentum/liquid-glass-react/dist/components/LiquidGlassBase.css';

function InteractiveButton() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  const handleMouseEnter = () => {
    console.log('Mouse entered button');
  };

  const handleMouseLeave = () => {
    console.log('Mouse left button');
  };

  return (
    <LiquidGlassButton
      width={200}
      height={60}
      borderRadius={30}
      innerShadowColor="rgba(255, 255, 255, 0.7)"
      innerShadowBlur={15}
      innerShadowSpread={-3}
      glassTintColor="#ffffff"
      glassTintOpacity={40}
      frostBlurRadius={2}
      noiseFrequency={0.008}
      noiseStrength={77}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      Button Example
    </LiquidGlassButton>
  );
}

Stylized Link

Create elegant links with liquid glass styling:

import React from 'react';
import { LiquidGlassLink } from '@tinymomentum/liquid-glass-react';
import '@tinymomentum/liquid-glass-react/dist/components/LiquidGlassBase.css';

function StylizedLink() {
  const handleClick = () => {
    console.log('Link clicked!');
  };

  return (
    <LiquidGlassLink
      width={200}
      height={60}
      borderRadius={30}
      innerShadowColor="rgba(255, 255, 255, 0.7)"
      innerShadowBlur={15}
      innerShadowSpread={-3}
      glassTintColor="#ffffff"
      glassTintOpacity={40}
      frostBlurRadius={2}
      noiseFrequency={0.008}
      noiseStrength={77}
      href="https://www.google.com"
      target="_blank"
      onClick={handleClick}
    >
      Visit Google
    </LiquidGlassLink>
  );
}

Complete App Example

Here's a complete React application setup with all components:

import React from 'react';
import {
  LiquidGlassButton,
  LiquidGlassContainer,
  LiquidGlassLink
} from '@tinymomentum/liquid-glass-react';
import '@tinymomentum/liquid-glass-react/dist/components/LiquidGlassBase.css';

function App() {
  const showAlert = () => {
    alert('Liquid Glass Button Clicked!');
  };

  return (
    <div className="App">
      <LiquidGlassContainer>
        <h3>Welcome to Liquid Glass</h3>
        <p>Beautiful liquid glass effects for React</p>
      </LiquidGlassContainer>
      <LiquidGlassButton 
        style={{ margin: '20px' }} onClick={showAlert}>
          Click Me
        </LiquidGlassButton>
        
        <LiquidGlassLink 
        style={{ margin: '20px' }}
          href="https://github.com" 
          target="_blank"
        >
          Visit GitHub
        </LiquidGlassLink>
    </div>
  );
}

export default App;

Ready to Get Started?

Try our interactive generator to customize your liquid glass effects, then use the React components in your project!

Try Generator View Examples

React Documentation