Usage
import { LiquidGlassCard } from "@/registry/components/liquid-glass-card/liquid-glass-card";
<LiquidGlassCard>Label</LiquidGlassCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children? | ReactNode | ||
refraction? | number | 40 | Strength of the refraction, 0 to 100. |
blur? | number | 10 | Frost blur radius, px. |
radius? | string | "var(--radius-surface)" | Corner radius, any CSS length. |
Also accepts every prop of HTMLAttributes<HTMLDivElement>.
When to use
Glass panels over imagery or colourful backgrounds.
When not to use
Plain backgrounds (the effect disappears) or text-heavy panels needing contrast.