Liquid Glass

A modern liquid glass component with glassmorphism effects featuring frosted glass aesthetics, backdrop blur, transparency, and smooth animations. Perfect for creating contemporary glass-like UI elements with CSS and JavaScript.

Open in

Installation

npx uilayouts@latest add liquid-glass

Props

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