diff --git a/.eslintrc b/.eslintrc
index 7bc6ab9333b..ba6ab1e1098 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,14 +2,21 @@
   "root": true,
   "extends": "next/core-web-vitals",
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"],
+  "plugins": [
+    "@typescript-eslint",
+    "eslint-plugin-react-compiler",
+    "local-rules",
+    "@html-eslint/eslint-plugin-react"
+  ],
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
     "react-hooks/exhaustive-deps": "error",
     "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
     "react-compiler/react-compiler": "error",
-    "local-rules/lint-markdown-code-blocks": "error"
+    "local-rules/lint-markdown-code-blocks": "error",
+    "@html-eslint/react/no-duplicate-classname": ["error", {"callees": ["cn"]}],
+    "@html-eslint/react/classname-spacing": ["error", {"callees": ["cn"]}]
   },
   "env": {
     "node": true,
diff --git a/package.json b/package.json
index 359f30d3e21..7a2b3c3440f 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@babel/core": "^7.12.9",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@html-eslint/eslint-plugin-react": "^0.58.1",
     "@mdx-js/mdx": "^2.1.3",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index f9b785db420..920a6624d28 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -43,7 +43,7 @@ function Section({children, background = null}) {
         'mx-auto flex flex-col w-full',
         background === null && 'max-w-7xl',
         background === 'left-card' &&
-          'bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 ',
+          'bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10',
         background === 'right-card' &&
           'bg-gradient-right dark:bg-gradient-right-dark border-t border-primary/5 dark:border-primary-dark/5'
       )}
@@ -793,7 +793,7 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
           )}>
           <div
             className={cn(
-              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100 transition-transform ease-in-out duration-300',
               i % 2 === 0
                 ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
                 : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
@@ -1325,7 +1325,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
             <div
               ref={refreshRef}
               className={cn(
-                'relative rounded-full flex justify-center items-center ',
+                'relative rounded-full flex justify-center items-center',
                 isPulsing && shouldAnimatePulse && 'animation-pulse-button'
               )}>
               {isPulsing && shouldAnimatePulse && (
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index efc90ed2c76..2e5c23a3fb7 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -303,7 +303,7 @@ export default function TopNav({
               <div className="flex flex-column justify-center items-center">
                 <NextLink
                   href="/versions"
-                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
+                  className="flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
                   v{siteConfig.version}
                 </NextLink>
               </div>
@@ -344,7 +344,7 @@ export default function TopNav({
                 </NavItem>
               </div>
               <div className="flex w-full md:hidden"></div>
-              <div className="flex items-center -space-x-2.5 xs:space-x-0 ">
+              <div className="flex items-center -space-x-2.5 xs:space-x-0">
                 <div className="flex md:hidden">
                   <button
                     aria-label="Search"
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx
index 479617bed49..871710a07a3 100644
--- a/src/components/MDX/BlogCard.tsx
+++ b/src/components/MDX/BlogCard.tsx
@@ -27,7 +27,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
       href={url as string}
       passHref
       className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
-      <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
+      <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
         <div className="flex flex-row gap-3 w-full">
           <h2 className="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">
             {title}
diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx
index d3ed3a0659c..2f7d001a39d 100644
--- a/src/components/MDX/CodeBlock/index.tsx
+++ b/src/components/MDX/CodeBlock/index.tsx
@@ -37,7 +37,7 @@ export default memo(function CodeBlockWrapper(props: {
             'rounded-lg leading-6 h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg text-[13.6px] overflow-hidden',
             !isFromPackageImport && 'my-8'
           )}>
-          <div className="py-[18px] ps-5 font-normal ">
+          <div className="py-[18px] ps-5 font-normal">
             <p className="sp-pre-placeholder overflow-hidden">{children}</p>
           </div>
         </pre>
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index ead9341b6e3..e988ec8ae1b 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -210,7 +210,7 @@ export function Preview({
               'z-50',
               // This isn't absolutely positioned so that
               // the errors can also expand the parent height.
-              isExpanded ? 'sticky top-8 ' : null
+              isExpanded ? 'sticky top-8' : null
             )}>
             <ErrorMessage error={error} />
           </div>
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 0fd0160d665..68f4f314ac5 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -68,7 +68,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           </div>
           <div>
             <button
-              className="w-full text-start text-primary-dark dark:text-primary-dark "
+              className="w-full text-start text-primary-dark dark:text-primary-dark"
               onClick={() => {
                 window.navigator.clipboard.writeText(message ?? '');
                 setCopied(true);
diff --git a/yarn.lock b/yarn.lock
index ce7b74ed632..92585b3bb8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1084,6 +1084,30 @@
   resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.0.tgz"
   integrity sha512-/nDsijOXRwXVLpUBEiYuWguIBSIN3ZbKyah+KPUiD8bdIKtX1U/k+qLYUEr7NCQnSF2e4w1dr8me42ECuG3cvw==
 
+"@html-eslint/core@^0.58.1":
+  version "0.58.1"
+  resolved "https://registry.yarnpkg.com/@html-eslint/core/-/core-0.58.1.tgz#f503041ae13333caf3946aff0bbd7de2b1a7f940"
+  integrity sha512-GHYDt2Q3ws9aa0/bmMhkv21ExQJnrjKY/iByjdBVp3lBq49wlzIzvAfcx4Bsp+RMV3oPZhzlnLhPpXLuVYt2mQ==
+  dependencies:
+    "@html-eslint/types" "^0.58.1"
+    html-standard "^0.0.13"
+
+"@html-eslint/eslint-plugin-react@^0.58.1":
+  version "0.58.1"
+  resolved "https://registry.yarnpkg.com/@html-eslint/eslint-plugin-react/-/eslint-plugin-react-0.58.1.tgz#2eb7ed8e547b7b104f1fdb883c1e27a03bdffde8"
+  integrity sha512-Oyywt21Y0sNnZXylW9gcsryNZVjSZliROANbho3i5iqwyE7Zw9NlxiQmY9/EgkqNRB3Uqr2xyVVQpHheJj0aMA==
+  dependencies:
+    "@html-eslint/core" "^0.58.1"
+
+"@html-eslint/types@^0.58.1":
+  version "0.58.1"
+  resolved "https://registry.yarnpkg.com/@html-eslint/types/-/types-0.58.1.tgz#98a4418ad5ed8fec0e29a0c337c6a2d9d4f10661"
+  integrity sha512-1F2A5XXpgfHQ8dm14E/EztyERoVldT91VGMZCJECZpidf5Cbc21vxeHLT6/POTJm0ICJOmyBlocF62i/rkoVEQ==
+  dependencies:
+    "@types/css-tree" "^2.3.11"
+    "@types/estree" "^1.0.6"
+    es-html-parser "0.3.1"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz"
@@ -1728,6 +1752,11 @@
   dependencies:
     classnames "*"
 
+"@types/css-tree@^2.3.11":
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/@types/css-tree/-/css-tree-2.3.11.tgz#c9457a54fe8ea02d2d72ddc864c1b9c5625f10d0"
+  integrity sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==
+
 "@types/debounce@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.1.tgz"
@@ -1752,6 +1781,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
+"@types/estree@^1.0.6":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
 "@types/github-slugger@^1.3.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@types/github-slugger/-/github-slugger-1.3.0.tgz"
@@ -1979,6 +2013,11 @@
     "@typescript-eslint/types" "5.36.2"
     eslint-visitor-keys "^3.3.0"
 
+"@vscode/l10n@^0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@vscode/l10n/-/l10n-0.0.18.tgz#916d3a5e960dbab47c1c56f58a7cb5087b135c95"
+  integrity sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==
+
 absolute-path@^0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/absolute-path/-/absolute-path-0.0.0.tgz"
@@ -3295,6 +3334,11 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
+es-html-parser@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/es-html-parser/-/es-html-parser-0.3.1.tgz#268098fd701749f97e0b81b4615c8ecae8311388"
+  integrity sha512-YTEasG4xt7FEN4b6qJIPbFo/fzQ5kjRMEQ33QMqSXTvfXqAbC2rHxo32x2/1Rhq7Mlu6wI3MIpM5Kf2VHPXrUQ==
+
 es-iterator-helpers@^1.0.19:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
@@ -4421,6 +4465,14 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+html-standard@^0.0.13:
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/html-standard/-/html-standard-0.0.13.tgz#c39742ea94fd3c6e729fd220db470ebe41d7af89"
+  integrity sha512-6oNfW3c1t44O7jVXu0tp4E5MbHifWlXrHlZBPt6y7vFdgLOUUh8hyzoRhfUgozlBUK6oLLYhqP1uIqbZ8ggcBA==
+  dependencies:
+    vscode-css-languageservice "^6.3.9"
+    vscode-languageserver-textdocument "^1.0.12"
+
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz"
@@ -8563,6 +8615,31 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+vscode-css-languageservice@^6.3.9:
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-6.3.10.tgz#242365ac3ff2eb69f77ca7503a4e694135180302"
+  integrity sha512-eq5N9Er3fC4vA9zd9EFhyBG90wtCCuXgRSpAndaOgXMh1Wgep5lBgRIeDgjZBW9pa+332yC9+49cZMW8jcL3MA==
+  dependencies:
+    "@vscode/l10n" "^0.0.18"
+    vscode-languageserver-textdocument "^1.0.12"
+    vscode-languageserver-types "3.17.5"
+    vscode-uri "^3.1.0"
+
+vscode-languageserver-textdocument@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz#457ee04271ab38998a093c68c2342f53f6e4a631"
+  integrity sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==
+
+vscode-languageserver-types@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
+
+vscode-uri@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.1.0.tgz#dd09ec5a66a38b5c3fffc774015713496d14e09c"
+  integrity sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==
+
 w3c-keyname@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz"