diff --git a/docs/package.json b/docs/package.json
index c60d7016..ffeb2f3f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,7 +20,7 @@
     "copy-to-clipboard": "^3.3.3",
     "next": "^13.4.19",
     "next-seo": "^6.1.0",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-live": "^4.1.3",
diff --git a/docs/src/components/code-block/code-block.tsx b/docs/src/components/code-block/code-block.tsx
index 93dbadf3..8f55364d 100644
--- a/docs/src/components/code-block/code-block.tsx
+++ b/docs/src/components/code-block/code-block.tsx
@@ -1,6 +1,6 @@
 import { Box, useBoolean } from "@md3-ui/core"
 import dynamic from "next/dynamic"
-import theme from "prism-react-renderer/themes/vsDark"
+import { themes } from "prism-react-renderer"
 import { useEffect } from "react"
 import { CopyButton } from "./copy-button"
 import { Highlight } from "./highlight"
@@ -39,7 +39,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
     mountStylesheet,
     noInline: manual,
     rawCode,
-    theme,
+    theme: themes.vsDark,
   }
 
   if (mounted && (language === "jsx" || language === "tsx") && live === true) {
@@ -72,7 +72,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
           language={language}
           metastring={ln}
           showLines={viewlines}
-          theme={theme}
+          theme={themes.vsDark}
         />
       </Box>
       <CopyButton code={rawCode} sx={{ top: 4 }} />
diff --git a/docs/src/components/code-block/highlight.tsx b/docs/src/components/code-block/highlight.tsx
index f75acae0..4f7c7407 100644
--- a/docs/src/components/code-block/highlight.tsx
+++ b/docs/src/components/code-block/highlight.tsx
@@ -1,8 +1,8 @@
 import { Box, Text } from "@md3-ui/core"
-import BaseHighlight, {
+import {
+  Highlight as BaseHighlight,
   Language,
   PrismTheme,
-  defaultProps,
 } from "prism-react-renderer"
 
 const RE = /{([\d,-]+)}/
@@ -41,12 +41,7 @@ export const Highlight: React.FC<HighlightProps> = ({
   const shouldHighlightLine = calculateLinesToHighlight(metastring)
 
   return (
-    <BaseHighlight
-      {...defaultProps}
-      code={codeString}
-      language={language}
-      theme={theme}
-    >
+    <BaseHighlight code={codeString} language={language} theme={theme}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <Box
           as="div"
diff --git a/yarn.lock b/yarn.lock
index 848d46a8..9e15bda4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14568,10 +14568,13 @@ prism-react-renderer@2.0.5:
     "@types/prismjs" "^1.26.0"
     clsx "^1.2.1"
 
-prism-react-renderer@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
-  integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
+prism-react-renderer@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.0.6.tgz#24f0c1afbc07d4a268677fb05e77079ea80b6a2f"
+  integrity sha512-ERzmAI5UvrcTw5ivfEG20/dYClAsC84eSED5p9X3oKpm0xPV4A5clFK1mp7lPIdKmbLnQYsPTGiOI7WS6gWigw==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^1.2.1"
 
 proc-log@^3.0.0:
   version "3.0.0"