Now Playing
Until I Found You
Stephen Sanchez
75%
Settings: Blur 0px • Highlight 0 • Glow 0 • Specular 0.5
Control Center
Wi-Fi
Bluetooth
AirDrop
Flashlight
Settings: Blur 20px • Highlight 0.3 • Glow 0.2 • Specular 0.4
72°
Sunny
San Francisco
Blur 15px • Highlight 0.5
Today
Team Meeting
Lunch Break
Blur 3px • Highlight 0.2
Notifications
New message
2 min ago
Blur 5px • Highlight 0.6
Calculator
Blur 40px • Highlight 0.8
Installation
Usage
import { GlassContainer } from "@/components/ui/glass-container";<GlassContainer blur={3} variant="prominent" tint="warm" shadow="large">
<div className="text-white">Your content here</div>
</GlassContainer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | Content to be rendered inside the glass container. |
className | string | "" | Additional CSS classes to apply. |
variant | string | "default" | Predefined variants with different blur, opacity, and shadow configurations (default, prominent, regular, thin). |
blur | number | varies by variant | Backdrop blur amount in pixels. |
opacity | number | varies by variant | Opacity of the glass overlay. |
distortion | string | "medium" | Glass distortion effect intensity (none, subtle, medium, strong). |
tint | string | "warm" | Color tint of the glass effect (neutral, warm, cool, vibrant). |
border | boolean | true | Whether to show the glass border highlight. |
hover | boolean | true | Whether to enable hover effects (scale and shadow). |
glassOverlay | boolean | true | Whether to apply the tinted glass overlay. |
highlightColor | string | rgba(255,255,255,0.4) | Color of the specular highlights. |
highlightOpacity | number | 1 | Opacity of the highlight effect. |
innerGlowColor | string | rgba(255,255,255,0.1) | Color of the inner glow effect. |
innerGlowOpacity | number | 1 | Opacity of the inner glow effect. |
specularIntensity | number | 0.4 | Intensity of the specular highlights (0-1). |