diff --git a/app/components/syntax/Button.tsx b/app/components/syntax/Button.tsx
index fb0a7f2..6b5234d 100644
--- a/app/components/syntax/Button.tsx
+++ b/app/components/syntax/Button.tsx
@@ -1,4 +1,5 @@
 import { Link } from "@/components/common/Link";
+import React from "react";
 import clsx from "clsx";
 
 const variantStyles = {
diff --git a/app/components/syntax/CSRSnippet.tsx b/app/components/syntax/CSRSnippet.tsx
index bd23808..bd388dd 100644
--- a/app/components/syntax/CSRSnippet.tsx
+++ b/app/components/syntax/CSRSnippet.tsx
@@ -1,8 +1,8 @@
 import { ClipboardDocumentIcon } from "@heroicons/react/24/outline";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { Highlight } from "prism-react-renderer";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import { toast } from "react-toastify";
 import { Button } from "./Button";
 import Prism from "prismjs";
diff --git a/app/components/syntax/Callout.tsx b/app/components/syntax/Callout.tsx
index e933547..4084dac 100644
--- a/app/components/syntax/Callout.tsx
+++ b/app/components/syntax/Callout.tsx
@@ -1,4 +1,5 @@
 import { Icon } from "@syntax/Icon";
+import React from "react";
 import clsx from "clsx";
 
 const styles = {
diff --git a/app/components/syntax/DocsHeader.tsx b/app/components/syntax/DocsHeader.tsx
index 7ab57ea..bab4ce6 100644
--- a/app/components/syntax/DocsHeader.tsx
+++ b/app/components/syntax/DocsHeader.tsx
@@ -1,6 +1,7 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { ClockIcon } from "@heroicons/react/24/outline";
 import { navigation } from "@/lib/navigation";
+import React from "react";
 
 type DocsHeaderProps = {
   title?: string;
diff --git a/app/components/syntax/DocsLayout.tsx b/app/components/syntax/DocsLayout.tsx
index 0e2f85a..b0bf80a 100644
--- a/app/components/syntax/DocsLayout.tsx
+++ b/app/components/syntax/DocsLayout.tsx
@@ -5,6 +5,7 @@ import { PrevNextLinks } from "@syntax/PrevNextLinks";
 import { collectSections } from "@/lib/sections";
 import { DocsHeader } from "@syntax/DocsHeader";
 import { Prose } from "@syntax/Prose";
+import React from "react";
 
 export function DocsLayout({
   children,
diff --git a/app/components/syntax/Fence.tsx b/app/components/syntax/Fence.tsx
index 6a138f6..6af6507 100644
--- a/app/components/syntax/Fence.tsx
+++ b/app/components/syntax/Fence.tsx
@@ -1,5 +1,6 @@
 import { clientOnly } from "vike-react/clientOnly";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 
diff --git a/app/components/syntax/Hero.tsx b/app/components/syntax/Hero.tsx
index d30aa1f..39ce8c2 100644
--- a/app/components/syntax/Hero.tsx
+++ b/app/components/syntax/Hero.tsx
@@ -3,8 +3,8 @@ import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { Image } from "@/components/common/Image";
 import { Highlight } from "prism-react-renderer";
+import React, { Fragment } from "react";
 import { Button } from "@syntax/Button";
-import { Fragment } from "react";
 import clsx from "clsx";
 
 const codeLanguage = "javascript";
diff --git a/app/components/syntax/Icon.tsx b/app/components/syntax/Icon.tsx
index 2af0a22..fd916da 100644
--- a/app/components/syntax/Icon.tsx
+++ b/app/components/syntax/Icon.tsx
@@ -32,8 +32,8 @@ export function Icon({
   color?: keyof typeof iconStyles;
   icon: keyof typeof icons;
 } & Omit<React.ComponentPropsWithoutRef<"svg">, "color">) {
-  let id = useId();
-  let IconComponent = icons[icon];
+  const id = useId();
+  const IconComponent = icons[icon];
 
   return (
     <svg aria-hidden="true" viewBox="0 0 32 32" fill="none" className={clsx(className, iconStyles[color])} {...props}>