diff --git a/apps/www/content/primitives/components/dialog.mdx b/apps/www/content/primitives/components/dialog.mdx
index 36ebf7fb..11bafc17 100644
--- a/apps/www/content/primitives/components/dialog.mdx
+++ b/apps/www/content/primitives/components/dialog.mdx
@@ -9,19 +9,51 @@ radix:
## Preview
-
+
+
+
+
+
## Installation
@@ -53,5 +85,25 @@ import { Dialog } from '@raystack/apsara'
+
+
+
`} border />
diff --git a/packages/raystack/dialog/dialog.module.css b/packages/raystack/dialog/dialog.module.css
index 5e10c12b..4ed2f67b 100644
--- a/packages/raystack/dialog/dialog.module.css
+++ b/packages/raystack/dialog/dialog.module.css
@@ -15,6 +15,10 @@
border: 1px solid var(--border-subtle);
}
+.overlayBlur {
+ backdrop-filter: blur(2px);
+}
+
.dialogContent:focus {
outline: none;
}
diff --git a/packages/raystack/dialog/dialog.tsx b/packages/raystack/dialog/dialog.tsx
index 29100801..2ff69266 100644
--- a/packages/raystack/dialog/dialog.tsx
+++ b/packages/raystack/dialog/dialog.tsx
@@ -22,15 +22,16 @@ export const DialogContent = forwardRef<
close?: boolean;
overlayStyle?: React.CSSProperties;
overlayClassname?: string;
+ overlayBlur?: boolean;
}
>(
(
- { className, children, close, overlayStyle, overlayClassname, ...props },
+ { className, children, close, overlayStyle, overlayClassname, overlayBlur, ...props },
forwardedRef
) => {
return (
-
+
,
VariantProps {}
@@ -57,10 +64,10 @@ export interface OverlayProps
const Overlay = forwardRef<
ElementRef,
OverlayProps
->(({ className, ...props }, ref) => (
+>(({ className, blur, ...props }, ref) => (
));