diff --git a/docs/.node-version b/docs/.node-version
new file mode 100644
index 0000000..2bd5a0a
--- /dev/null
+++ b/docs/.node-version
@@ -0,0 +1 @@
+22
diff --git a/docs/.nvmrc b/docs/.nvmrc
new file mode 100644
index 0000000..2bd5a0a
--- /dev/null
+++ b/docs/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/docs/package.json b/docs/package.json
index a77d271..4d36d6e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -2,6 +2,9 @@
   "name": "tailwindui-syntax",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -9,29 +12,32 @@
     "lint": "next lint"
   },
   "browserslist": "defaults, not ie <= 11",
+  "overrides": {
+    "postcss": "8.5.14"
+  },
   "dependencies": {
-    "@docsearch/react": "^3.3.4",
-    "@headlessui/react": "^1.7.2",
-    "@markdoc/markdoc": "^0.2.2",
-    "@markdoc/next.js": "^0.2.2",
-    "@sindresorhus/slugify": "^2.1.0",
+    "@docsearch/react": "^4.6.3",
+    "@headlessui/react": "^2.2.10",
+    "@markdoc/markdoc": "^0.5.7",
+    "@markdoc/next.js": "^0.5.0",
+    "@sindresorhus/slugify": "^3.0.0",
     "@tailwindcss/typography": "^0.5.7",
     "autoprefixer": "^10.4.12",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "focus-visible": "^5.2.0",
-    "next": "14.2.35",
-    "postcss-focus-visible": "^6.0.4",
-    "postcss-import": "^14.1.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^4.8.0",
-    "tailwindcss": "^3.2.1"
+    "next": "15.5.18",
+    "postcss-focus-visible": "^11.0.0",
+    "postcss-import": "^16.1.1",
+    "prism-react-renderer": "^2.4.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-icons": "^5.6.0",
+    "tailwindcss": "^3.4.19"
   },
   "devDependencies": {
-    "eslint": "8.26.0",
-    "eslint-config-next": "13.0.2",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "eslint": "9.39.4",
+    "eslint-config-next": "15.5.18",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0"
   }
 }
diff --git a/docs/src/components/Fence.jsx b/docs/src/components/Fence.jsx
index 182609b..bee06ff 100644
--- a/docs/src/components/Fence.jsx
+++ b/docs/src/components/Fence.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Fragment } from 'react'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Highlight } from 'prism-react-renderer'
 
 export function Fence({ children, language }) {
   const [copied, setCopied] = React.useState(false);
@@ -24,9 +24,8 @@ export function Fence({ children, language }) {
   return (
     <>
       <Highlight
-      {...defaultProps}
       code={children.trimEnd()}
-      language={language}
+      language={language ?? 'text'}
       theme={undefined}
     >
       {({ className, style, tokens, getTokenProps }) => (
@@ -87,4 +86,4 @@ const CopiedIcon = () => (
   >
     <path d="M688 312v-48c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8zm-392 88c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H296zm376 116c-119.3 0-216 96.7-216 216s96.7 216 216 216 216-96.7 216-216-96.7-216-216-216zm107.5 323.5C750.8 868.2 712.6 884 672 884s-78.8-15.8-107.5-44.5C535.8 810.8 520 772.6 520 732s15.8-78.8 44.5-107.5C593.2 595.8 631.4 580 672 580s78.8 15.8 107.5 44.5C808.2 653.2 824 691.4 824 732s-15.8 78.8-44.5 107.5zM761 656h-44.3c-2.6 0-5 1.2-6.5 3.3l-63.5 87.8-23.1-31.9a7.92 7.92 0 0 0-6.5-3.3H573c-6.5 0-10.3 7.4-6.5 12.7l73.8 102.1c3.2 4.4 9.7 4.4 12.9 0l114.2-158c3.9-5.3.1-12.7-6.4-12.7zM440 852H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h272c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" />
   </svg>
-);
\ No newline at end of file
+);
diff --git a/docs/src/components/Hero.jsx b/docs/src/components/Hero.jsx
index 34cc234..044ae6a 100644
--- a/docs/src/components/Hero.jsx
+++ b/docs/src/components/Hero.jsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react'
 import Image from 'next/image'
 import clsx from 'clsx'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Highlight } from 'prism-react-renderer'
 
 import { Button } from '@/components/Button'
 import { HeroBackground } from '@/components/HeroBackground'
@@ -161,7 +161,6 @@ export function Hero() {
                       ))}
                     </div>
                     <Highlight
-                      {...defaultProps}
                       code={currentTab.code}
                       language={currentTab.codeLanguage}
                       theme={undefined}