diff --git a/website/src/components/TextColor/index.js b/website/src/components/TextColor/index.js
new file mode 100644
index 00000000000..bcc6d50998a
--- /dev/null
+++ b/website/src/components/TextColor/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const TextColor = ({ color, className, children }) => (
+  <span style={color ? { color } : {}} className={clsx(className)}>
+    {children}
+  </span>
+);
+
+export default TextColor;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index b8979ffc943..66f5e0d959b 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2143,4 +2143,14 @@ table th {
 [data-theme='dark'] table th {
   color: #000000; /* Black text on darker background */
   font-weight: bold;
-}
\ No newline at end of file
+}
+
+.text-green {
+  color: #42f54e;
+}
+.text-red {
+  color: #ff171f;
+}
+.text-yellow {
+  color: #f5ea20;
+}
diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js
index 422d6c99fab..c12e5d28e1a 100644
--- a/website/src/theme/MDXComponents/index.js
+++ b/website/src/theme/MDXComponents/index.js
@@ -45,6 +45,7 @@ import Lifecycle from '@site/src/components/lifeCycle';
 import DetailsToggle from '@site/src/components/detailsToggle';
 import Expandable from '@site/src/components/expandable';
 import ConfettiTrigger from '@site/src/components/confetti/';
+import TextColor from '@site/src/components/TextColor';
 
 const MDXComponents = {
   Head,
@@ -97,5 +98,7 @@ const MDXComponents = {
   Expandable: Expandable,
   ConfettiTrigger: ConfettiTrigger,
   SortableTable: SortableTable,
+  TextColor: TextColor,
+    
 };
 export default MDXComponents;