Browse components
Glass Surface
A liquid-glass panel whose rim bends the backdrop through an SVG displacement map, with chromatic fringes, blur and a specular edge.
Installation
npx shadcn@latest add @glint-ui/glass-surfaceFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glass-surface.json
Usage
import { GlassSurface } from "@/components/ui/glass-surface";
<GlassSurface className="w-80 p-6" radius={28}>
<p>Now playing</p>
</GlassSurface>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Panel content. |
| radius | number | 28 | Corner radius in px. |
| bezel | number | 26 | Width of the refracting rim in px. |
| refraction | number | 70 | Strength of the rim refraction in px. |
| aberration | number | 3 | Px of chromatic split at the rim. |
| blur | number | 2 | Backdrop blur in px. |
| saturation | number | 1.6 | Backdrop saturation multiplier. |
| tint | number | 0.06 | Opacity of the white tint. |
| className | string | — | Extra classes for the root element. |