diff --git a/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx b/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx
index 02286321b..2389c283b 100644
--- a/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx
+++ b/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx
@@ -5,6 +5,7 @@ import {
   SpeedDialContent,
   SpeedDialAction,
   Typography,
+  TypographyProps,
 } from "@material-tailwind/react";
 import {
   PlusIcon,
@@ -14,7 +15,7 @@ import {
 } from "@heroicons/react/24/outline";
 
 export function SpeedDialWithTextOutside() {
-  const labelProps = {
+  const labelProps:Pick<TypographyProps,"variant"|"color"|"className"> = {
     variant: "small",
     color: "blue-gray",
     className:
diff --git a/docs-content/react/timeline/default-timeline.tsx b/docs-content/react/timeline/default-timeline.tsx
index 9c80acb5b..6f84df838 100644
--- a/docs-content/react/timeline/default-timeline.tsx
+++ b/docs-content/react/timeline/default-timeline.tsx
@@ -21,7 +21,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -38,7 +38,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -54,7 +54,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
diff --git a/docs-content/react/timeline/timeline-with-avatar.tsx b/docs-content/react/timeline/timeline-with-avatar.tsx
index 36678da6e..d8b68e9f2 100644
--- a/docs-content/react/timeline/timeline-with-avatar.tsx
+++ b/docs-content/react/timeline/timeline-with-avatar.tsx
@@ -24,7 +24,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -43,7 +43,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -61,7 +61,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
diff --git a/docs-content/react/timeline/timeline-with-icon.tsx b/docs-content/react/timeline/timeline-with-icon.tsx
index 440fbdc5c..1741df82d 100644
--- a/docs-content/react/timeline/timeline-with-icon.tsx
+++ b/docs-content/react/timeline/timeline-with-icon.tsx
@@ -24,7 +24,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -43,7 +43,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -61,7 +61,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
diff --git a/packages/material-tailwind-react/src/components/Typography/index.tsx b/packages/material-tailwind-react/src/components/Typography/index.tsx
index 3a462b772..e9d117cd5 100644
--- a/packages/material-tailwind-react/src/components/Typography/index.tsx
+++ b/packages/material-tailwind-react/src/components/Typography/index.tsx
@@ -28,7 +28,11 @@ import {
   propTypesChildren,
 } from "../../types/components/typography";
 
-export interface TypographyProps extends React.ComponentProps<any> {
+type Props<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<T>;
+
+
+type BaseTypographyProps =Props<"p"> & Props<"h1"> & Props<"h2"> & Props<"h3"> & Props<"h4"> & Props<"h5"> & Props<"h6"> & Props<"a"> 
+export interface TypographyProps extends BaseTypographyProps {
   variant?: variant;
   color?: color;
   textGradient?: textGradient;