diff --git a/components/Prose.jsx b/components/Prose.jsx
index df66cd2..3b39bc7 100644
--- a/components/Prose.jsx
+++ b/components/Prose.jsx
@@ -19,7 +19,7 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         // hr
         'dark:prose-hr:border-slate-800',
         // code
-        'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none',
+        'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800',
       )}
       {...props}
     />
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..2dfe283
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/lib/utils.js b/lib/utils.js
index ed0a7fe..d7a4218 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -2,10 +2,12 @@ import { slugifyWithCounter } from '@sindresorhus/slugify'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+// Merges classes using clsx and tailwind-merge.
 export function cn(...inputs) {
   return twMerge(clsx(inputs))
 }
 
+// Recursively retrieve text from a node or its children.
 export function getNodeText(node) {
   let text = ''
   for (let child of node.children ?? []) {
@@ -18,6 +20,7 @@ export function getNodeText(node) {
   return text
 }
 
+// Collects and processes heading nodes (h2, h3) from a list of nodes.
 export function collectHeadings(nodes, slugify = slugifyWithCounter()) {
   let sections = []
 
diff --git a/package-lock.json b/package-lock.json
index 45d445f..4abf787 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
         "@mdx-js/loader": "^2.1.5",
         "@mdx-js/react": "^2.1.5",
         "@next/mdx": "^13.0.3",
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.1",
         "@radix-ui/react-navigation-menu": "^1.1.3",
         "@radix-ui/react-separator": "^1.0.2",
@@ -3765,6 +3767,67 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
+      "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -3869,6 +3932,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
diff --git a/package.json b/package.json
index ff4b765..53fcdcc 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.3",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.2",
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index afb41c5..a500963 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client'
+import { Fragment } from 'react'
 
 export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) {
   const { fieldTypeSettings } = fieldTypeSettingsBlockFields
@@ -10,18 +11,18 @@ export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) {
         const { acfFieldName, impactOnWpgraphql } = fieldTypeSettingsMeta
 
         return (
-          <div key={id} className="mb-4">
-            <h3 className="mb-2">{name}</h3>
-            <code className="whitespace-nowrap text-gray-400">{acfFieldName}</code>
-            <ul>
-              <li className={description ? '' : 'italic text-gray-400'}>
-                {description || 'Description not yet documented'}
+          <Fragment key={id}>
+            <h3 key={'h3' + id} className="mt-2">{name}</h3>
+            {acfFieldName && <code>{acfFieldName}</code>}
+            <ul key={'ul' + id}>
+              <li>
+                {description || <span className='italic'>Description not yet documented</span>}
               </li>
-              <li className={impactOnWpgraphql ? '' : 'italic text-gray-400'}>
-                {impactOnWpgraphql ? <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} /> : 'Impact on WPGraphQL not yet documented'}
+              <li>
+                {impactOnWpgraphql ? <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} /> : <span className='italic'>Impact on WPGraphQL not yet documented</span>}
               </li>
             </ul>
-          </div>
+          </Fragment>
         );
       })}
     </>