diff --git a/src/app/globals.css b/src/app/globals.css
index 05b5f585..33a46d20 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,10 +37,6 @@ body {
   scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
 }
 
-details {
-  @apply my-4;
-}
-
 /**
  * Pmndrs theme for JavaScript, CSS and HTML
  * Loosely based on https://marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs
diff --git a/src/components/mdx/Details/Details.tsx b/src/components/mdx/Details/Details.tsx
new file mode 100644
index 00000000..a3706c63
--- /dev/null
+++ b/src/components/mdx/Details/Details.tsx
@@ -0,0 +1,6 @@
+import cn from '@/lib/cn'
+import { type ComponentProps } from 'react'
+
+export function Details({ className, ...props }: ComponentProps<'details'>) {
+  return <details className={cn('my-4', className)} {...props} />
+}
diff --git a/src/components/mdx/Details/index.ts b/src/components/mdx/Details/index.ts
new file mode 100644
index 00000000..fdbadef0
--- /dev/null
+++ b/src/components/mdx/Details/index.ts
@@ -0,0 +1 @@
+export * from './Details'
diff --git a/src/components/mdx/Details/rehypeDetails.ts b/src/components/mdx/Details/rehypeDetails.ts
new file mode 100644
index 00000000..8f7d2ea8
--- /dev/null
+++ b/src/components/mdx/Details/rehypeDetails.ts
@@ -0,0 +1,12 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+// https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
+export function rehypeDetails() {
+  return (tree: Root) => {
+    visit(tree, null, function (node) {
+      // console.log(node)
+      if (node.type === 'mdxJsxFlowElement' && node.name === 'details') node.name = 'Details' // map HTML <details> to <Details> React component
+    })
+  }
+}
diff --git a/src/components/mdx/Summary/Summary.tsx b/src/components/mdx/Summary/Summary.tsx
new file mode 100644
index 00000000..af0b9db0
--- /dev/null
+++ b/src/components/mdx/Summary/Summary.tsx
@@ -0,0 +1,6 @@
+import cn from '@/lib/cn'
+import { type ComponentProps } from 'react'
+
+export function Summary({ className, ...props }: ComponentProps<'summary'>) {
+  return <summary className={cn('mb-2', className)} {...props} />
+}
diff --git a/src/components/mdx/Summary/index.ts b/src/components/mdx/Summary/index.ts
new file mode 100644
index 00000000..2b0468d7
--- /dev/null
+++ b/src/components/mdx/Summary/index.ts
@@ -0,0 +1 @@
+export * from './Summary'
diff --git a/src/components/mdx/Summary/rehypeSummary.ts b/src/components/mdx/Summary/rehypeSummary.ts
new file mode 100644
index 00000000..38bd1bdd
--- /dev/null
+++ b/src/components/mdx/Summary/rehypeSummary.ts
@@ -0,0 +1,12 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+// https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
+export function rehypeSummary() {
+  return (tree: Root) => {
+    visit(tree, null, function (node) {
+      // console.log(node)
+      if (node.type === 'mdxJsxFlowElement' && node.name === 'summary') node.name = 'Summary' // map HTML <summary> to <Summary> React component
+    })
+  }
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 186ba50c..10c9f407 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -1,8 +1,10 @@
 export * from './Codesandbox'
+export * from './Details'
 export * from './Gha'
 export * from './Grid'
 export * from './Hint'
 export * from './Img'
+export * from './Summary'
 export * from './Toc'
 
 import cn from '@/lib/cn'
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
index 0cc4ae11..3f4ac8ab 100644
--- a/src/utils/docs.tsx
+++ b/src/utils/docs.tsx
@@ -3,8 +3,10 @@ import * as components from '@/components/mdx'
 import { Codesandbox } from '@/components/mdx/Codesandbox'
 import { fetchCSB } from '@/components/mdx/Codesandbox/fetchCSB'
 import { rehypeCodesandbox } from '@/components/mdx/Codesandbox/rehypeCodesandbox'
+import { rehypeDetails } from '@/components/mdx/Details/rehypeDetails'
 import { rehypeGha } from '@/components/mdx/Gha/rehypeGha'
 import { rehypeImg } from '@/components/mdx/Img/rehypeImg'
+import { rehypeSummary } from '@/components/mdx/Summary/rehypeSummary'
 import { rehypeToc } from '@/components/mdx/Toc/rehypeToc'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
 import matter from 'gray-matter'
@@ -158,6 +160,8 @@ async function _getDocs(
             remarkPlugins: [remarkGFM],
             rehypePlugins: [
               rehypeImg,
+              rehypeDetails,
+              rehypeSummary,
               rehypeGha,
               rehypePrismPlus,
               rehypeCodesandbox(boxes), // 1. put all Codesandbox[id] into `doc.boxes`