diff --git a/src/lib/components/modal/modal.module.scss b/src/lib/components/modal/modal.module.scss
index 5c39867..ae10e37 100644
--- a/src/lib/components/modal/modal.module.scss
+++ b/src/lib/components/modal/modal.module.scss
@@ -2,6 +2,10 @@
   position: fixed;
 }
 
+.ModalAppend {
+  z-index: 9999;
+}
+
 .ModalAbsolute {
   position: absolute;
 }
diff --git a/src/lib/components/modal/modal.tsx b/src/lib/components/modal/modal.tsx
index 1d978c5..a557443 100644
--- a/src/lib/components/modal/modal.tsx
+++ b/src/lib/components/modal/modal.tsx
@@ -11,16 +11,25 @@ export interface ModalProps extends ModalInnerProps {
    * The modal will be appended to the passed element instead of being rendered in place
    * @defaultValue defaults inPlace
    **/
-  renderTo: HTMLElement
+  renderTo?: HTMLElement | "body"
 }
 
 export function Modal({ renderTo, className, ...props }: ModalProps) {
-  const classes = classnames([styles.ModalFixed, className])
+  const appendToBody = renderTo === "body"
+
+  const classes = classnames([
+    styles.ModalFixed,
+    className,
+    appendToBody && styles.ModalAppend,
+  ])
 
   const modalContent = <ModalInner className={classes} {...props} />
 
-  if (renderTo) {
+  if (renderTo && renderTo instanceof HTMLElement) {
     return ReactDOM.createPortal(modalContent, renderTo)
+  } else if (appendToBody) {
+    const document = globalThis.document
+    return ReactDOM.createPortal(modalContent, document)
   }
 
   return modalContent