Foundations
IntroductionDialog
A highly tactile modal dialog alert with Apple-spec blur backdrops and elastic animations.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/dialog.jsonUsage
Click the button below to trigger the refractive dialog overlay.
Best practices
The best practices when using dialogs.
- Keep title text and descriptions short so the alert message remains scannable.
- Always offer a clear, non-destructive escape path using the translucent
Button variant. - Position primary action buttons on the right side of the footer for natural scan reading.
- For lightweight contextual options, consider using a Sheet instead of a full-page dialog overlay.
Props
The props available for the Dialog.Content component.
| Prop | Type | Default | Description |
|---|---|---|---|
| liquidGlass | boolean | false | Enables physical liquid glass refraction distortion (Chromium only). |
| refractiveIndex | number | 1.5 | Index of refraction (IOR) for the glass surface curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 30 | Depth of the glass bezel refraction boundary zone (px). |
| displacementScale | number | 40 | Strength of the physical refraction displacement offset. |
| surfaceProfile | "circle" | "squircle" | "concave" | "lip" | "squircle" | 3D bezel outline profile contour style. |
| chromaticAberration | boolean | false | Enables realistic RGB channel prism splitting refraction at bezel edges. |
| saturationBoost | number | 1.3 | Color saturation boost multiplier inside refracted zone. |
| backgroundBlur | number | 0.3 | Pre-blur factor applied to background to hide SVG rendering artifacts. |