@lilith/ui-glassmorphism

Glassmorphism UI components with configurable blur, opacity, and effects. Create beautiful frosted glass interfaces with fine-grained control over visual properties.

Features

• Configurable glass effects - blur, opacity, borders, shadows, and glow
• Pre-built variants for common use cases (cards, modals, dropdowns, navigation)
• Dark and light modes for different background contexts
• CSS custom properties export for pure CSS usage
• Hook-based API for programmatic style generation
• Theme-aware styling with styled-components

Installation

pnpm add @lilith/ui-glassmorphism

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "styled-components": "^6.0.0"
}

Usage

GlassPanel Component

The main component for creating glass surfaces:

import { GlassPanel } from '@lilith/ui-glassmorphism';

// Using preset variants
<GlassPanel variant="light">
  Card content here
</GlassPanel>

<GlassPanel variant="modal">
  Modal content
</GlassPanel>

// Custom configuration
<GlassPanel
  blur="lg"
  opacity="medium"
  mode="light"
  border="medium"
  shadow="md"
  glow="subtle"
  hoverable
>
  Custom glass panel
</GlassPanel>

// With color tint
<GlassPanel
  variant="medium"
  tint="#3b82f6"
  tintIntensity={0.1}
>
  Tinted glass panel
</GlassPanel>

GlassDropdown

Dropdown menu with glass styling:

import { GlassDropdown, GlassDropdownItem, GlassDropdownDivider } from '@lilith/ui-glassmorphism';

<GlassDropdown>
  <GlassDropdownItem onClick={() => handleEdit()}>Edit</GlassDropdownItem>
  <GlassDropdownItem onClick={() => handleDuplicate()}>Duplicate</GlassDropdownItem>
  <GlassDropdownDivider />
  <GlassDropdownItem onClick={() => handleDelete()}>Delete</GlassDropdownItem>
</GlassDropdown>

useGlassStyles Hook

Generate glass styles programmatically:

import { useGlassStyles, generateGlassStyles } from '@lilith/ui-glassmorphism';

function CustomComponent() {
  const glassStyles = useGlassStyles({
    blur: 'md',
    opacity: 'light',
    mode: 'light',
    border: 'subtle',
    shadow: 'sm',
  });

  return (
    <div style={glassStyles}>
      Custom glass element
    </div>
  );
}

// Or generate styles outside React
const styles = generateGlassStyles({
  blur: 'lg',
  opacity: 'medium',
});

CSS Tokens

Import CSS custom properties for pure CSS usage:

import '@lilith/ui-glassmorphism/styles';

.my-glass-element {
  background: var(--glass-background);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
}

Variants

Pre-configured variants for common use cases:

Variant	Use Case	Characteristics
subtle	Light UI elements	Minimal blur, very transparent
light	Standard cards	Medium blur, light shadow
medium	Prominent panels	Strong blur, visible borders
heavy	Modals, overlays	Maximum blur, strong shadow
dropdown	Dropdown menus	Solid background for readability
nav	Navigation bars	Solid with high saturation
modal	Modal dialogs	Opaque with strong shadow
tooltip	Tooltips	Solid, minimal

<GlassPanel variant="subtle">Subtle glass</GlassPanel>
<GlassPanel variant="light">Light glass</GlassPanel>
<GlassPanel variant="medium">Medium glass</GlassPanel>
<GlassPanel variant="heavy">Heavy glass</GlassPanel>
<GlassPanel variant="dropdown">Dropdown glass</GlassPanel>
<GlassPanel variant="nav">Navigation glass</GlassPanel>
<GlassPanel variant="modal">Modal glass</GlassPanel>
<GlassPanel variant="tooltip">Tooltip glass</GlassPanel>

API Reference

GlassPanelProps

Prop	Type	Default	Description
variant	GlassVariant	-	Pre-configured variant
blur	BlurIntensity	-	Backdrop blur level
opacity	OpacityPreset	-	Background opacity
mode	BackgroundMode	-	Light or dark overlay
border	BorderStyle	-	Border opacity
shadow	ShadowDepth	-	Drop shadow depth
glow	GlowIntensity	-	Inner frost glow
saturation	number	-	Backdrop saturation (0-300)
tint	string	-	Optional color tint
tintIntensity	number	-	Tint opacity (0-1)
hoverable	boolean	false	Enable hover effects
borderRadius	string | number	-	Custom border radius
padding	string | number	-	Padding
as	keyof JSX.IntrinsicElements	'div'	HTML element
className	string	-	Additional class
children	ReactNode	-	Content

Effect Configuration Types

type BlurIntensity = 'none' | 'sm' | 'md' | 'lg' | 'xl';

type OpacityPreset =
  | 'transparent'  // 0
  | 'whisper'      // 0.02
  | 'subtle'       // 0.04
  | 'light'        // 0.06
  | 'medium'       // 0.1
  | 'heavy'        // 0.15
  | 'solid'        // 0.92
  | 'opaque';      // 0.98

type BackgroundMode = 'light' | 'dark';

type BorderStyle = 'none' | 'subtle' | 'light' | 'medium' | 'bright';

type ShadowDepth = 'none' | 'sm' | 'md' | 'lg' | 'xl';

type GlowIntensity = 'none' | 'subtle' | 'medium' | 'strong';

GlassEffectConfig

interface GlassEffectConfig {
  blur?: BlurIntensity;
  opacity?: OpacityPreset;
  mode?: BackgroundMode;
  border?: BorderStyle;
  shadow?: ShadowDepth;
  glow?: GlowIntensity;
  saturation?: number;
}

Constants

Access numeric values programmatically:

import {
  BLUR_VALUES,
  OPACITY_VALUES,
  BORDER_VALUES,
  SHADOW_VALUES,
  GLOW_VALUES,
  VARIANT_PRESETS,
} from '@lilith/ui-glassmorphism';

// BLUR_VALUES = { none: 0, sm: 8, md: 16, lg: 24, xl: 40 }
// OPACITY_VALUES = { transparent: 0, whisper: 0.02, ... }

Types

All types are exported:

import type {
  BlurIntensity,
  OpacityPreset,
  BackgroundMode,
  BorderStyle,
  ShadowDepth,
  GlowIntensity,
  GlassEffectConfig,
  GlassVariant,
  GlassPanelProps,
  GlassStyles,
} from '@lilith/ui-glassmorphism';

Browser Support

Glassmorphism requires backdrop-filter support. The package includes webkit prefixes for Safari compatibility. For browsers without support, the background will fall back to a solid color.

License

MIT