Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Liquid Glass React

Apple's Liquid Glass effect for React.

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

Proper edgy bending and refraction
Multiple refraction modes
Configurable frosty level
Supports arbitrary child elements
Configurable paddings
Correct hover and click effects
Edges and highlights take on the underlying light like Apple's does
Configurable chromatic aberration
Configurable elasticity, to mimic Apple's "liquid" feel

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install liquid-glass-react

Basic Usage

importLiquidGlassfrom'liquid-glass-react'functionApp(){return(<LiquidGlass><divclassName="p-6"><h2>Your content here</h2><p>This will have the liquid glass effect</p></div></LiquidGlass>)}

Button Example

<LiquidGlassdisplacementScale={64}blurAmount={0.1}saturation={130}aberrationIntensity={2}elasticity={0.35}cornerRadius={100}padding="8px 16px"onClick={()=>console.log('Button clicked!')}><spanclassName="text-white font-medium">Click Me</span></LiquidGlass>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

functionApp(){constcontainerRef=useRef<HTMLDivElement>(null)return(<divref={containerRef}className="w-full h-screen bg-image"><LiquidGlassmouseContainer={containerRef}elasticity={0.3}style={{position: 'fixed',top: '50%',left: '50%'}}><divclassName="p-6"><h2>Glass responds to mouse anywhere in the container</h2></div></LiquidGlass></div>)}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to render inside the glass container
`displacementScale`	`number`	`70`	Controls the intensity of the displacement effect
`blurAmount`	`number`	`0.0625`	Controls the blur/frosting level
`saturation`	`number`	`140`	Controls color saturation of the glass effect
`aberrationIntensity`	`number`	`2`	Controls chromatic aberration intensity
`elasticity`	`number`	`0.15`	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes
`padding`	`string`	-	CSS padding value
`style`	`React.CSSProperties`	-	Additional inline styles
`overLight`	`boolean`	`false`	Whether the glass is over a light background
`onClick`	`() => void`	-	Click handler
`mouseContainer`	`React.RefObject<HTMLElement \| null> \| null`	`null`	Container element to track mouse movement on (defaults to the glass component itself)
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode for different visual effects. `shader` is the most accurate but not the most stable.
`globalMousePos`	`{ x: number; y: number }`	-	Global mouse position coordinates for manual control
`mouseOffset`	`{ x: number; y: number }`	-	Mouse position offset for fine-tuning positioning

Name		Name	Last commit message	Last commit date
assets		assets
liquid-glass-example		liquid-glass-example
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Name		Name	Last commit message	Last commit date
assets		assets
liquid-glass-example		liquid-glass-example
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Name		Name	Last commit message	Last commit date
assets		assets
liquid-glass-example		liquid-glass-example
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Name		Name	Last commit message	Last commit date
assets		assets
liquid-glass-example		liquid-glass-example
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Name		Name	Last commit message	Last commit date
assets		assets
liquid-glass-example		liquid-glass-example
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lock		bun.lock
esbuild.config.js		esbuild.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Liquid Glass React

🎬 Demo

✨ Features

🚀 Usage

Installation

Basic Usage

Button Example

Mouse Container Example

Props

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Liquid Glass React

🎬 Demo

✨ Features

🚀 Usage

Installation

Basic Usage

Button Example

Mouse Container Example

Props

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Liquid Glass React

🎬 Demo

✨ Features

🚀 Usage

Installation

Basic Usage

Button Example

Mouse Container Example

Props

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Liquid Glass React

🎬 Demo

✨ Features

🚀 Usage

Installation

Basic Usage

Button Example

Mouse Container Example

Props

About