Liquid Glass

Liquid glass is a glass-like material that is used to create a glass-like effect in a web application.

Installation

npx uilayouts@latest add liquid-glass

Prop	Type	Default	Description
children	ReactNode	-	The content to be wrapped inside the liquid glass card
className	string	''	Additional CSS classes to apply to the card wrapper
draggable	boolean	false	Enable drag functionality with elastic bounce-back animation
expandable	boolean	false	Enable click-to-expand functionality with smooth size transitions
width	string	-	Initial/collapsed width (e.g., '200px', '100%', 'auto')
height	string	-	Initial/collapsed height (e.g., '120px', 'auto')
expandedWidth	string	-	Width when expanded (falls back to width or 'auto' if not provided)
expandedHeight	string	-	Height when expanded (falls back to height or 'auto' if not provided)
blurIntensity	string	'sm'	Backdrop blur strength: 'sm', 'md', 'lg', 'xl'
borderRadius	string	'32px'	Custom border radius for the glass card
glowIntensity	string	'sm'	Outer glow effect: 'none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
shadowIntensity	string	'md'	Inner shadow depth: 'none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
...props	object	-	Any additional props are passed through to the root element