Foundations
IntroductionGlass View
The core styling primitive of Grgurevic UI. A premium physics-based refractive container with curvature profiles, light fringing, and specular glare.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/glass-view.jsonUsage
A basic refractive container enclosing custom content.
Variants
The backdrop styling variant configuration options.
Best practices
The best practices when styling glass elements.
- Use the Glass View component sparingly to prevent performance issues and rendering overhead on lower-end devices.
- Keep refractive index settings within a realistic range of 1.2 to 1.8 for standard glass simulations.
- Pair Glass View with high-contrast backgrounds to showcase the edge refraction.
- Disable chromatic aberration on low-end devices to conserve rendering performance. The
Switch component also supports a liquidGlassprop for consistent glass styling. - Ensure the saturation boost is kept subtle to avoid unrealistic color distortions. Components like Button expose the same glass tuning parameters.
Props
The props available for the Glass View component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "prominent" | "bordered" | "secondary" | "translucent" | "ghost" | "destructive" | "prominent" | Backdrop filter/opacity configuration. |
| size | "xs" | "sm" | "default" | "lg" | "default" | Paddings configuration. |
| magnetic | boolean | true | Pulls the card toward the pointer using spring drag parameters. |
| scale | boolean | true | Squeezes on holding and click actions. |
| specular | boolean | true | Projects precise 3D specular light glare onto borders. |
| liquidGlass | boolean | false | Enables the Apple-inspired physical glass refraction and specular overlay. |
| refractiveIndex | number | 1.5 | The index of refraction (IOR). Simulates realistic physical bending of background light. |
| bezelWidth | number | 20 | The width of the refraction zone around the element's border (in pixels). |
| displacementScale | number | 40 | SVG displacement mapping strength. Controls the magnitude of pixel shift. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | The height curve shape of the bezel. "squircle" matches Apple's design curvature perfectly. |
| chromaticAberration | boolean | false | Enables 3-channel (RGB) parallel displacement to produce hyper-realistic rainbow fringing. |
| saturationBoost | number | 1.3 | Amplifies color saturation inside the glass container to simulate prism color amplification. |
| backgroundBlur | number | 0.3 | Slight pre-blur parameter to prevent hard pixels and alias edges inside the refraction. |