diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 35d6d3622..6c65652c8 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -7,7 +7,7 @@ import { Callout } from "@/components/callout"
 import { MdxCard } from "@/components/mdx-card"
 
 const components = {
-  h1: ({ className, ...props }) => (
+  h1: ({ className, ...props }: { className: string }) => (
     <h1
       className={cn(
         "mt-2 scroll-m-20 text-4xl font-bold tracking-tight",
@@ -16,7 +16,7 @@ const components = {
       {...props}
     />
   ),
-  h2: ({ className, ...props }) => (
+  h2: ({ className, ...props }: { className: string }) => (
     <h2
       className={cn(
         "mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0",
@@ -25,7 +25,7 @@ const components = {
       {...props}
     />
   ),
-  h3: ({ className, ...props }) => (
+  h3: ({ className, ...props }: { className: string }) => (
     <h3
       className={cn(
         "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
@@ -34,7 +34,7 @@ const components = {
       {...props}
     />
   ),
-  h4: ({ className, ...props }) => (
+  h4: ({ className, ...props }: { className: string }) => (
     <h4
       className={cn(
         "mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
@@ -43,7 +43,7 @@ const components = {
       {...props}
     />
   ),
-  h5: ({ className, ...props }) => (
+  h5: ({ className, ...props }: { className: string }) => (
     <h5
       className={cn(
         "mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
@@ -52,7 +52,7 @@ const components = {
       {...props}
     />
   ),
-  h6: ({ className, ...props }) => (
+  h6: ({ className, ...props }: { className: string }) => (
     <h6
       className={cn(
         "mt-8 scroll-m-20 text-base font-semibold tracking-tight",
@@ -61,28 +61,28 @@ const components = {
       {...props}
     />
   ),
-  a: ({ className, ...props }) => (
+  a: ({ className, ...props }: { className: string }) => (
     <a
       className={cn("font-medium underline underline-offset-4", className)}
       {...props}
     />
   ),
-  p: ({ className, ...props }) => (
+  p: ({ className, ...props }: { className: string }) => (
     <p
       className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
       {...props}
     />
   ),
-  ul: ({ className, ...props }) => (
+  ul: ({ className, ...props }: { className: string }) => (
     <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
   ),
-  ol: ({ className, ...props }) => (
+  ol: ({ className, ...props }: { className: string }) => (
     <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
   ),
-  li: ({ className, ...props }) => (
+  li: ({ className, ...props }: { className: string }) => (
     <li className={cn("mt-2", className)} {...props} />
   ),
-  blockquote: ({ className, ...props }) => (
+  blockquote: ({ className, ...props }: { className: string }) => (
     <blockquote
       className={cn(
         "mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground",
@@ -111,7 +111,7 @@ const components = {
       {...props}
     />
   ),
-  th: ({ className, ...props }) => (
+  th: ({ className, ...props }: { className: string }) => (
     <th
       className={cn(
         "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -120,7 +120,7 @@ const components = {
       {...props}
     />
   ),
-  td: ({ className, ...props }) => (
+  td: ({ className, ...props }: { className: string }) => (
     <td
       className={cn(
         "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
@@ -129,7 +129,7 @@ const components = {
       {...props}
     />
   ),
-  pre: ({ className, ...props }) => (
+  pre: ({ className, ...props }: { className: string }) => (
     <pre
       className={cn(
         "mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4",
@@ -138,7 +138,7 @@ const components = {
       {...props}
     />
   ),
-  code: ({ className, ...props }) => (
+  code: ({ className, ...props }: { className: string }) => (
     <code
       className={cn(
         "relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm",