diff --git a/docsite/src/components/AdmonitionDetails.tsx b/docsite/src/components/AdmonitionDetails.tsx
new file mode 100644
index 00000000..fa098547
--- /dev/null
+++ b/docsite/src/components/AdmonitionDetails.tsx
@@ -0,0 +1,47 @@
+import Details from '@theme/Details';
+import type {Props as DetailProps} from '@theme/Details';
+import IconWarning from '@theme/Admonition/Icon/Warning';
+import IconDanger from '@theme/Admonition/Icon/Danger';
+import IconTip from '@theme/Admonition/Icon/Tip';
+import IconNote from '@theme/Admonition/Icon/Note';
+import { ReactElement } from 'react';
+
+export interface DetailsAdmoProps extends DetailProps {
+    type?: 'warning' | 'danger' | 'note' | 'tip'
+}
+
+const DetailsAdmo = (props: DetailsAdmoProps) => {
+
+    let cn: string = '';
+    let icon: ReactElement;
+
+    switch(props.type) {
+        case 'warning':
+            cn = 'alert--warning';
+            icon = <IconWarning/>;
+            break;
+        case 'danger':
+            cn = 'alert--danger';
+            icon = <IconDanger/>;
+            break;
+        case 'note':
+            cn = 'alert--secondary';
+            icon = <IconNote/>;
+            break;
+        case 'tip':
+            cn = 'alert--success';
+            icon = <IconTip/>
+            break;
+    }
+
+    const iconWrapper = icon === undefined ? null : <span className="admoIcon">{icon}</span>;
+
+    const summary = <summary>{iconWrapper}{props.summary}</summary>;
+
+    return <Details className={cn} summary={summary}>
+        {props.children}
+    </Details>
+
+};
+
+export default DetailsAdmo;
\ No newline at end of file
diff --git a/docsite/src/css/custom.css b/docsite/src/css/custom.css
index 2bc6a4cf..fc77d5b4 100644
--- a/docsite/src/css/custom.css
+++ b/docsite/src/css/custom.css
@@ -28,3 +28,57 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* https://github.com/facebook/docusaurus/discussions/5749 */
+details[class^='details_'].alert--info {
+  --ifm-alert-border-color: var(--ifm-color-emphasis-400);
+  /* --ifm-alert-background-color: transparent; */
+  --ifm-code-background: #{palette.$background};
+  --ifm-alert-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.8);
+
+  margin-bottom: var(--ifm-paragraph-margin-bottom);
+
+  &:not(.alert--warning,.alert--success,.alert--secondary,.alert--danger) {
+    --ifm-alert-background-color: transparent;
+
+    > summary::before {
+      top: 0.15rem;
+    }
+  }
+
+  &.alert--success {
+    --ifm-alert-background-color: var(--ifm-color-success-contrast-background);
+    --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
+  }
+  &.alert--secondary {
+    --ifm-alert-background-color: var(--ifm-color-secondary-contrast-background);
+    --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
+  }
+
+  > summary {
+    --docusaurus-details-decoration-color: currentColor;
+    font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family);
+
+    .admoIcon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 0.4em;
+
+      > svg { 
+        display: inline-block;
+        height: 1.6em;
+        width: 1.6em;
+        fill: var(--ifm-alert-foreground-color);
+      }
+    }
+  }
+  > div > div[class^='collapsibleContent_'] {
+    margin-top: var(--ifm-alert-padding-vertical);
+  }
+
+
+  dl {
+    --ifm-spacing-vertical: 0.5rem;
+  }
+
+}
\ No newline at end of file
diff --git a/docsite/src/theme/MDXComponents.js b/docsite/src/theme/MDXComponents.js
index 1396825c..267d66b0 100644
--- a/docsite/src/theme/MDXComponents.js
+++ b/docsite/src/theme/MDXComponents.js
@@ -2,6 +2,7 @@ import React from 'react';
 // Import the original mapper
 import MDXComponents from '@theme-original/MDXComponents';
 import SchemaLink from "@site/src/components/SchemaLink";
+import DetailsAdmo from "@site/src/components/AdmonitionDetails";
 import AIOExample from "@site/src/components/AIOExample";
 import FileExample from "@site/src/components/FileExample";
 import EnvType from "@site/src/components/snippets/_env-config.mdx";
@@ -18,5 +19,6 @@ export default {
   EnvType,
   FileType,
   AIOType,
-  Config
+  Config,
+  DetailsAdmo
 };
\ No newline at end of file