diff --git a/site/content/docs/standard/integrations/next/index.html b/site/content/docs/standard/integrations/next/index.html
index 74ce0c0e3..82e4aa317 100644
--- a/site/content/docs/standard/integrations/next/index.html
+++ b/site/content/docs/standard/integrations/next/index.html
@@ -166,7 +166,7 @@ <h2 class="text-lg font-bold">Step 4</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "_app.js" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import "@/styles/globals.css";
         import { Roboto } from "next/font/google";
         
@@ -222,7 +222,7 @@ <h2 class="text-lg font-bold">Step 7</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { Datepicker, Input, initTE } from "tw-elements";
         import { useEffect } from "react";
         
@@ -265,7 +265,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "index.js" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import dynamic from "next/dynamic";
 
       const DynamicDatepicker = dynamic(() => import("./MyDatepicker"), { ssr: false });
@@ -310,7 +310,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.js" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { Datepicker, Input } from "tw-elements";
       import { useEffect } from "react";
       
diff --git a/site/content/docs/standard/integrations/react/index.html b/site/content/docs/standard/integrations/react/index.html
index 031f23138..c11b1b0af 100644
--- a/site/content/docs/standard/integrations/react/index.html
+++ b/site/content/docs/standard/integrations/react/index.html
@@ -557,7 +557,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
         import React, { useEffect } from "react";
         import { Datepicker, Input, initTE } from "tw-elements";
 
@@ -614,7 +614,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile">}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+    {{< twsnippet/code active=true lang="jsx" >}}
         import { useEffect } from "react";
         import { Datepicker, Input } from "tw-elements";
 
diff --git a/site/content/docs/standard/integrations/remix/index.html b/site/content/docs/standard/integrations/remix/index.html
index bf656fa29..9109e05b2 100644
--- a/site/content/docs/standard/integrations/remix/index.html
+++ b/site/content/docs/standard/integrations/remix/index.html
@@ -217,7 +217,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { useEffect } from "react";
         import { Datepicker, Input, initTE } from "tw-elements";
         
@@ -267,7 +267,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "root.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { ClientOnly } from "remix-utils";
       import MyDatepicker from "./components/MyDatepicker.client";
 
@@ -309,7 +309,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "MyDatepicker.client.jsx" "" "mobile" >}}
-    {{< twsnippet/code active=true lang="JavaScript" >}}
+    {{< twsnippet/code active=true lang="jsx" >}}
     import { useEffect } from "react";
     import { Datepicker, Input } from "tw-elements";
     
diff --git a/site/content/docs/standard/integrations/solid/index.html b/site/content/docs/standard/integrations/solid/index.html
index f69528875..d286d5040 100644
--- a/site/content/docs/standard/integrations/solid/index.html
+++ b/site/content/docs/standard/integrations/solid/index.html
@@ -197,7 +197,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="jsx" >}}
         import { onMount } from "solid-js";
         import { Datepicker, Input, initTE } from "tw-elements";
         
@@ -259,7 +259,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "App.jsx" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="jsx" >}}
       import { onMount } from "solid-js";
       import { Datepicker, Input } from "tw-elements";
       
diff --git a/site/content/docs/standard/integrations/svelte/index.html b/site/content/docs/standard/integrations/svelte/index.html
index 588cb6c36..ca2d0d14e 100644
--- a/site/content/docs/standard/integrations/svelte/index.html
+++ b/site/content/docs/standard/integrations/svelte/index.html
@@ -249,7 +249,7 @@ <h2 class="text-lg font-bold">Step 8</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
+        {{< twsnippet/code active=true lang="html" >}}
     <script>
       import { onMount } from "svelte";
       import { Datepicker, Input, initTE } from "tw-elements";
@@ -306,7 +306,7 @@ <h2 class="text-lg font-bold">Step 1</h2>
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "+page.svelte" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
+      {{< twsnippet/code active=true lang="html" >}}
     <script>
       import { onMount } from "svelte";
       import { Datepicker, Input } from "tw-elements";
diff --git a/site/layouts/shortcodes/twsnippet/code.html b/site/layouts/shortcodes/twsnippet/code.html
index be083f022..760d4c7b0 100644
--- a/site/layouts/shortcodes/twsnippet/code.html
+++ b/site/layouts/shortcodes/twsnippet/code.html
@@ -10,7 +10,7 @@
   id="mdb_{{ $hash }}"
   role="tabpanel">
   <pre
-    class="grey text-[14px] lighten-3 line-numbers language-{{ .Get `lang` }} mb-0 dark:bg-neutral-600">
+    class="grey text-[14px] lighten-3 line-numbers language-{{ .Get `lang` }} mb-0">
         <code class="{{if ne (.Get `type`) ``}}type-{{.Get `type`}}{{end}}">
             {{ .Inner | htmlEscape | htmlUnescape }}
         </code>
diff --git a/site/static/css/new-prism.css b/site/static/css/new-prism.css
index 5cd3c25f6..fc3189f3e 100644
--- a/site/static/css/new-prism.css
+++ b/site/static/css/new-prism.css
@@ -562,41 +562,48 @@ pre[class*='language-'] {
 .dark code[class*='language-'],
 .dark pre[class*='language-'] {
   color: white;
-  text-shadow: 0 1px black;
+  text-shadow: none;
+  background: #202022;
 }
 .dark .docs-pills pre[class*='language-'] {
   border: 1px solid #525252;
 }
 .dark .token.operator, .dark .token.entity, .dark .token.url, .language-css .dark .token.string, .dark .style .token.string {
-  color: #eecea7;
-  background: rgb(82 82 91);
+  color: #c6e0e0;
+  background: transparent
+}
+ .dark .token.attr-name, .dark .token.char, .dark .token.builtin, .dark .token.inserted {
+  color: rgb(220, 220, 220) ;
 }
-.dark .token.selector, .dark .token.attr-name, .dark .token.string, .dark .token.char, .dark .token.builtin, .dark .token.inserted {
-  color: #a3c956;
+
+.dark .token.selector, .dark .token.string {
+  color: #73a3e6
 }
+
 .dark .token.function, .dark .token.class-name {
-  color: #e490a1;
+  color: #b06edc;
 }
 .dark .token.property, .dark .token.tag, .dark .token.boolean, .dark .token.number, .dark .token.constant, .dark .token.symbol, .dark .token.deleted {
-  color: #ea7fba;
+  color: #dc6eaf;
 }
 .dark .token.atrule, .dark .token.attr-value, .dark .token.keyword {
-  color: #84ccec;
+  color: #73c8e6;
 }
 .dark .token.comment {
-  color: #bdb6b6;
+  color: #999;
 }
 
 .dark .code-toolbar pre::-webkit-scrollbar {
-  width: 10px;
+  width: 15px;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-track {
-  background-color: #3f4b5d !important;
+  background-color: #272626 !important;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-thumb {
-  background-color: #79808a !important;
+  background-color: #444242 !important;
+  border-radius: 2px;
 }
 .dark .code-toolbar pre::-webkit-scrollbar-corner {
-  background-color: #3f4b5d !important;
+  background-color: #272626 !important;
 }
 /* stylelint-enable */
diff --git a/site/static/js/new-prism.js b/site/static/js/new-prism.js
index 725d384a3..a4a18eefc 100644
--- a/site/static/js/new-prism.js
+++ b/site/static/js/new-prism.js
@@ -1,5 +1,7 @@
 /* PrismJS 1.14.0
 http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+json+php+typescript+scss&plugins=line-numbers+toolbar+previewers+normalize-whitespace+copy-to-clipboard */
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+jsx */
 
 var _self =
   typeof window !== 'undefined'
@@ -896,6 +898,195 @@ Prism.languages.json = {
 
 Prism.languages.jsonp = Prism.languages.json;
 
+// start JSX
+
+(function (Prism) {
+  var javascript = Prism.util.clone(Prism.languages.javascript);
+
+  var space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
+  var braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
+  var spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
+
+  /**
+   * @param {string} source
+   * @param {string} [flags]
+   */
+  function re(source, flags) {
+    source = source
+      .replace(/<S>/g, function () {
+        return space;
+      })
+      .replace(/<BRACES>/g, function () {
+        return braces;
+      })
+      .replace(/<SPREAD>/g, function () {
+        return spread;
+      });
+    return RegExp(source, flags);
+  }
+
+  spread = re(spread).source;
+
+  Prism.languages.jsx = Prism.languages.extend("markup", javascript);
+  Prism.languages.jsx.tag.pattern = re(
+    /<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/
+      .source
+  );
+
+  Prism.languages.jsx.tag.inside["tag"].pattern = /^<\/?[^\s>\/]*/;
+  Prism.languages.jsx.tag.inside["attr-value"].pattern =
+    /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
+  Prism.languages.jsx.tag.inside["tag"].inside["class-name"] =
+    /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
+  Prism.languages.jsx.tag.inside["comment"] = javascript["comment"];
+
+  Prism.languages.insertBefore(
+    "inside",
+    "attr-name",
+    {
+      spread: {
+        pattern: re(/<SPREAD>/.source),
+        inside: Prism.languages.jsx,
+      },
+    },
+    Prism.languages.jsx.tag
+  );
+
+  Prism.languages.insertBefore(
+    "inside",
+    "special-attr",
+    {
+      script: {
+        // Allow for two levels of nesting
+        pattern: re(/=<BRACES>/.source),
+        alias: "language-javascript",
+        inside: {
+          "script-punctuation": {
+            pattern: /^=(?=\{)/,
+            alias: "punctuation",
+          },
+          rest: Prism.languages.jsx,
+        },
+      },
+    },
+    Prism.languages.jsx.tag
+  );
+
+  // The following will handle plain text inside tags
+  var stringifyToken = function (token) {
+    if (!token) {
+      return "";
+    }
+    if (typeof token === "string") {
+      return token;
+    }
+    if (typeof token.content === "string") {
+      return token.content;
+    }
+    return token.content.map(stringifyToken).join("");
+  };
+
+  var walkTokens = function (tokens) {
+    var openedTags = [];
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+      var notTagNorBrace = false;
+
+      if (typeof token !== "string") {
+        if (
+          token.type === "tag" &&
+          token.content[0] &&
+          token.content[0].type === "tag"
+        ) {
+          // We found a tag, now find its kind
+
+          if (token.content[0].content[0].content === "</") {
+            // Closing tag
+            if (
+              openedTags.length > 0 &&
+              openedTags[openedTags.length - 1].tagName ===
+                stringifyToken(token.content[0].content[1])
+            ) {
+              // Pop matching opening tag
+              openedTags.pop();
+            }
+          } else {
+            if (token.content[token.content.length - 1].content === "/>") {
+              // Autoclosed tag, ignore
+            } else {
+              // Opening tag
+              openedTags.push({
+                tagName: stringifyToken(token.content[0].content[1]),
+                openedBraces: 0,
+              });
+            }
+          }
+        } else if (
+          openedTags.length > 0 &&
+          token.type === "punctuation" &&
+          token.content === "{"
+        ) {
+          // Here we might have entered a JSX context inside a tag
+          openedTags[openedTags.length - 1].openedBraces++;
+        } else if (
+          openedTags.length > 0 &&
+          openedTags[openedTags.length - 1].openedBraces > 0 &&
+          token.type === "punctuation" &&
+          token.content === "}"
+        ) {
+          // Here we might have left a JSX context inside a tag
+          openedTags[openedTags.length - 1].openedBraces--;
+        } else {
+          notTagNorBrace = true;
+        }
+      }
+      if (notTagNorBrace || typeof token === "string") {
+        if (
+          openedTags.length > 0 &&
+          openedTags[openedTags.length - 1].openedBraces === 0
+        ) {
+          // Here we are inside a tag, and not inside a JSX context.
+          // That's plain text: drop any tokens matched.
+          var plainText = stringifyToken(token);
+
+          // And merge text with adjacent text
+          if (
+            i < tokens.length - 1 &&
+            (typeof tokens[i + 1] === "string" ||
+              tokens[i + 1].type === "plain-text")
+          ) {
+            plainText += stringifyToken(tokens[i + 1]);
+            tokens.splice(i + 1, 1);
+          }
+          if (
+            i > 0 &&
+            (typeof tokens[i - 1] === "string" ||
+              tokens[i - 1].type === "plain-text")
+          ) {
+            plainText = stringifyToken(tokens[i - 1]) + plainText;
+            tokens.splice(i - 1, 1);
+            i--;
+          }
+          tokens[i] = new Prism.Token("plain-text", plainText, null, plainText);
+        }
+      }
+
+      if (token.content && typeof token.content !== "string") {
+        walkTokens(token.content);
+      }
+    }
+  };
+
+  Prism.hooks.add("after-tokenize", function (env) {
+    if (env.language !== "jsx" && env.language !== "tsx") {
+      return;
+    }
+    walkTokens(env.tokens);
+  });
+})(Prism);
+
+// end JSX
+
 /**
  * Original by Aaron Harun: http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/
  * Modified by Miles Johnson: http://milesj.me
@@ -2392,7 +2583,7 @@ Prism.languages.scss['atrule'].inside.rest = Prism.languages.scss;
   Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
     var linkCopy = document.createElement('button');
     linkCopy.innerHTML = 'Copy';
-    linkCopy.classList = 'btn-copy-code text-gray-500 text-xs leading-[1.6] !top-[16px] bg-transparent font-bold uppercase text-sm px-4 py-2 outline-none focus:outline-none';
+    linkCopy.classList = 'btn-copy-code text-gray-500 text-xs leading-[1.6] !top-[16px] bg-transparent font-bold uppercase text-sm px-4 py-2 outline-none focus:outline-none dark:text-gray-200';
 
     if (!ClipboardJS) {
       callbacks.push(registerClipboard);