diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index 2805abf2f7cd..767f29648809 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -1,4 +1,5 @@
 import moment from 'moment';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { IEvent } from '@/types/event';
diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 241e9b5aa84b..7b6bad8dadb2 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ICaseStudies } from '@/types/post';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/CaseTOC.tsx b/components/CaseTOC.tsx
index 6008a6ea1562..e242c6af579c 100644
--- a/components/CaseTOC.tsx
+++ b/components/CaseTOC.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { useHeadingsObserver } from './helpers/useHeadingsObserver';
diff --git a/components/ClickableLogo.tsx b/components/ClickableLogo.tsx
index e40e7fa488c2..98836011e1fa 100644
--- a/components/ClickableLogo.tsx
+++ b/components/ClickableLogo.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 import AsyncAPILogo from './logos/AsyncAPILogo';
 
diff --git a/components/DemoAnimation.tsx b/components/DemoAnimation.tsx
index 0e8affd76280..1748d0c6ca2b 100644
--- a/components/DemoAnimation.tsx
+++ b/components/DemoAnimation.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Typing from 'react-typist-component';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
diff --git a/components/Feedback.tsx b/components/Feedback.tsx
index 6fad56ecb206..104e21107f0f 100644
--- a/components/Feedback.tsx
+++ b/components/Feedback.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import GitHubIssue from './buttons/GitHubIssue';
 
diff --git a/components/Figure.tsx b/components/Figure.tsx
index 878258ce7755..c20a92884c3d 100644
--- a/components/Figure.tsx
+++ b/components/Figure.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Float } from '@/types/components/FigurePropsType';
 
 import Caption from './Caption';
diff --git a/components/FinancialSummary/AsyncAPISummary.tsx b/components/FinancialSummary/AsyncAPISummary.tsx
index 280a24b476f8..7ee80d54dbfa 100644
--- a/components/FinancialSummary/AsyncAPISummary.tsx
+++ b/components/FinancialSummary/AsyncAPISummary.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/FinancialSummary/Card.tsx b/components/FinancialSummary/Card.tsx
index 7e46e272733b..44c9a00ca555 100644
--- a/components/FinancialSummary/Card.tsx
+++ b/components/FinancialSummary/Card.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ExpenseItem, Expenses } from '@/types/FinancialSummary/BarChartComponent';
 
 import ExpensesLinkData from '../../config/finance/json-data/ExpensesLink.json';
diff --git a/components/FinancialSummary/ContactUs.tsx b/components/FinancialSummary/ContactUs.tsx
index 738631f8e8fc..1e0dd9560d3e 100644
--- a/components/FinancialSummary/ContactUs.tsx
+++ b/components/FinancialSummary/ContactUs.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/FinancialSummary/CustomTooltip.tsx b/components/FinancialSummary/CustomTooltip.tsx
index fa23aa5e69ed..f4ae6afe1172 100644
--- a/components/FinancialSummary/CustomTooltip.tsx
+++ b/components/FinancialSummary/CustomTooltip.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { CustomTooltipProps } from '@/types/FinancialSummary/BarChartComponent';
 
 /**
diff --git a/components/FinancialSummary/ExpenseBreakdown.tsx b/components/FinancialSummary/ExpenseBreakdown.tsx
index 89ceaff56f72..d0566968820e 100644
--- a/components/FinancialSummary/ExpenseBreakdown.tsx
+++ b/components/FinancialSummary/ExpenseBreakdown.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { expenseData } from '../data/ExpenseBreakdownData';
diff --git a/components/FinancialSummary/ExpensesCard.tsx b/components/FinancialSummary/ExpensesCard.tsx
index 86af3e7b1b83..5bf593f96425 100644
--- a/components/FinancialSummary/ExpensesCard.tsx
+++ b/components/FinancialSummary/ExpensesCard.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Expenses } from '@/types/FinancialSummary/BarChartComponent';
 
 import ExpensesData from '../../config/finance/json-data/Expenses.json';
diff --git a/components/FinancialSummary/OtherFormsComponent.tsx b/components/FinancialSummary/OtherFormsComponent.tsx
index d3132dc931a0..2c52e7775fc9 100644
--- a/components/FinancialSummary/OtherFormsComponent.tsx
+++ b/components/FinancialSummary/OtherFormsComponent.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { otherFormsData } from '../data/otherFormsData';
diff --git a/components/FinancialSummary/SponsorshipTiers.tsx b/components/FinancialSummary/SponsorshipTiers.tsx
index 42464c7f9e6b..082fc22e5a37 100644
--- a/components/FinancialSummary/SponsorshipTiers.tsx
+++ b/components/FinancialSummary/SponsorshipTiers.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/FinancialSummary/SuccessStories.tsx b/components/FinancialSummary/SuccessStories.tsx
index 487be9fd1a39..2ffdd960b003 100644
--- a/components/FinancialSummary/SuccessStories.tsx
+++ b/components/FinancialSummary/SuccessStories.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { successStories } from '../data/successStoriesData';
 
 /**
diff --git a/components/GeneratorInstallation.tsx b/components/GeneratorInstallation.tsx
index 713e819198e8..bf4d937f802f 100644
--- a/components/GeneratorInstallation.tsx
+++ b/components/GeneratorInstallation.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 6ce5289e085a..c0609e837569 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/InlineHelp.tsx b/components/InlineHelp.tsx
index ec8d039da2a1..0db3fd87f441 100644
--- a/components/InlineHelp.tsx
+++ b/components/InlineHelp.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { registerClickAway } from './helpers/click-away';
 import QuestionMark from './icons/QuestionMark';
diff --git a/components/InputBox.stories.tsx b/components/InputBox.stories.tsx
index f30247a7b83b..78edb891d6fb 100644
--- a/components/InputBox.stories.tsx
+++ b/components/InputBox.stories.tsx
@@ -1,5 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';
diff --git a/components/Loader.stories.tsx b/components/Loader.stories.tsx
index 85d97ee88674..563f1ed81e79 100644
--- a/components/Loader.stories.tsx
+++ b/components/Loader.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
 import IconCircularLoader from '@/components/icons/CircularLoader';
diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx
index f9846fd6ec86..32bdb94f9783 100644
--- a/components/MDX/MDX.tsx
+++ b/components/MDX/MDX.tsx
@@ -1,7 +1,7 @@
 import { MDXProvider as CoreMDXProvider } from '@mdx-js/react';
 import mermaid from 'mermaid';
 import Link from 'next/link';
-import { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import {
   TwitterDMButton,
   TwitterFollowButton,
diff --git a/components/MacWindow.tsx b/components/MacWindow.tsx
index 5b419add92c1..9deb60ae7e08 100644
--- a/components/MacWindow.tsx
+++ b/components/MacWindow.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface IMacWindowProps {
   className?: string;
   contentClassName?: string;
diff --git a/components/Meeting.tsx b/components/Meeting.tsx
index fe2816fbd742..41bb90dd0fb4 100644
--- a/components/Meeting.tsx
+++ b/components/Meeting.tsx
@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from '@heroicons/react/outline';
+import React from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/Modal.tsx b/components/Modal.tsx
index ddaefd84ea70..95763029607f 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface IModalProps {
   title: string;
diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index b4bad37ed2d6..9b4a983bc69b 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
diff --git a/components/Profiles.tsx b/components/Profiles.tsx
index aeb1f567bd5e..bfe0b6cbaa7d 100644
--- a/components/Profiles.tsx
+++ b/components/Profiles.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 type Profile = {
   name: string;
   link: string;
diff --git a/components/Remember.tsx b/components/Remember.tsx
index 2f61af39d0ee..04a0ae5d090f 100644
--- a/components/Remember.tsx
+++ b/components/Remember.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import LightBulb from './icons/LightBulb';
 
 interface RememberProps {
diff --git a/components/SupportUs/SupportUs.tsx b/components/SupportUs/SupportUs.tsx
index 9eb62242097e..399fb0ca5dc8 100644
--- a/components/SupportUs/SupportUs.tsx
+++ b/components/SupportUs/SupportUs.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { items } from './SupportItemsList';
 
 interface SupportUsProps {
diff --git a/components/TOC.tsx b/components/TOC.tsx
index 89667a72468b..43819f0257ed 100644
--- a/components/TOC.tsx
+++ b/components/TOC.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Scrollspy from 'react-scrollspy';
 import { twMerge } from 'tailwind-merge';
 
diff --git a/components/Testimonial.tsx b/components/Testimonial.tsx
index 5d25a769fc05..b8a2d5abce27 100644
--- a/components/Testimonial.tsx
+++ b/components/Testimonial.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconQuote from './icons/Quote';
 import Paragraph from './typography/Paragraph';
 
diff --git a/components/Warning.tsx b/components/Warning.tsx
index dceff8014d59..3a937e86abca 100644
--- a/components/Warning.tsx
+++ b/components/Warning.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconExclamation from './icons/Exclamation';
 
 interface WarningProps {
diff --git a/components/buttons/Button.stories.tsx b/components/buttons/Button.stories.tsx
index a38eb40977f7..72d5af2c23aa 100644
--- a/components/buttons/Button.stories.tsx
+++ b/components/buttons/Button.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { ButtonIconPosition, ButtonSize, ButtonType } from '@/types/components/buttons/ButtonPropsType';
 
diff --git a/components/buttons/Button.tsx b/components/buttons/Button.tsx
index 2b4a30412c33..e19093238ebc 100644
--- a/components/buttons/Button.tsx
+++ b/components/buttons/Button.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ButtonIconPosition, ButtonSize, ButtonType } from '@/types/components/buttons/ButtonPropsType';
diff --git a/components/buttons/ChapterSuggestion.tsx b/components/buttons/ChapterSuggestion.tsx
index 1addc113fe5a..a2d59880adaa 100644
--- a/components/buttons/ChapterSuggestion.tsx
+++ b/components/buttons/ChapterSuggestion.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { HTMLAttributeAnchorTarget } from 'react';
+import React from 'react';
 import type { Url } from 'url';
 
 import IconArrowRight from '../icons/ArrowRight';
diff --git a/components/buttons/ChapterSuggestions.tsx b/components/buttons/ChapterSuggestions.tsx
index 2986418271ab..3d6d7eb5a025 100644
--- a/components/buttons/ChapterSuggestions.tsx
+++ b/components/buttons/ChapterSuggestions.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { IChapterSuggestionProps } from './ChapterSuggestion';
 import ChapterSuggestion from './ChapterSuggestion';
 
diff --git a/components/buttons/DocsButton.tsx b/components/buttons/DocsButton.tsx
index b56a353312c3..16f12205379a 100644
--- a/components/buttons/DocsButton.tsx
+++ b/components/buttons/DocsButton.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 import type { IDocs } from '@/types/post';
 
diff --git a/components/buttons/GithubButton.tsx b/components/buttons/GithubButton.tsx
index 571972d08694..43e11e6b11d5 100644
--- a/components/buttons/GithubButton.tsx
+++ b/components/buttons/GithubButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition, ButtonSize } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/buttons/GoogleCalendarButton.tsx b/components/buttons/GoogleCalendarButton.tsx
index 114b60fb4505..15f16dca65f7 100644
--- a/components/buttons/GoogleCalendarButton.tsx
+++ b/components/buttons/GoogleCalendarButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/buttons/ICSFileButton.tsx b/components/buttons/ICSFileButton.tsx
index ad03fac4d13f..1f529cee3c10 100644
--- a/components/buttons/ICSFileButton.tsx
+++ b/components/buttons/ICSFileButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/buttons/OpenInStudioButton.tsx b/components/buttons/OpenInStudioButton.tsx
index 55b8c3612156..7ffef59baf0a 100644
--- a/components/buttons/OpenInStudioButton.tsx
+++ b/components/buttons/OpenInStudioButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconRocket from '../icons/Rocket';
 import Button from './Button';
 
diff --git a/components/buttons/SlackButton.tsx b/components/buttons/SlackButton.tsx
index e30a87c27223..b69b7b292160 100644
--- a/components/buttons/SlackButton.tsx
+++ b/components/buttons/SlackButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/buttons/SubscribeButton.tsx b/components/buttons/SubscribeButton.tsx
index 225088aceb45..b78bb44f3b81 100644
--- a/components/buttons/SubscribeButton.tsx
+++ b/components/buttons/SubscribeButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/buttons/YoutubeButton.tsx b/components/buttons/YoutubeButton.tsx
index f48d4ac11848..4ca4ab331655 100644
--- a/components/buttons/YoutubeButton.tsx
+++ b/components/buttons/YoutubeButton.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
diff --git a/components/campaigns/AnnouncementHero.tsx b/components/campaigns/AnnouncementHero.tsx
index 1f84cb48c5ec..61ffb47b85eb 100644
--- a/components/campaigns/AnnouncementHero.tsx
+++ b/components/campaigns/AnnouncementHero.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import ArrowLeft from '../icons/ArrowLeft';
 import ArrowRight from '../icons/ArrowRight';
diff --git a/components/community/Hero.tsx b/components/community/Hero.tsx
index 5dea5c49ba09..59957e084ca9 100644
--- a/components/community/Hero.tsx
+++ b/components/community/Hero.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import orbitData from '../../config/orbitData.json';
 import Header from './Header';
 
diff --git a/components/dashboard/Button.tsx b/components/dashboard/Button.tsx
index a5927e98edf4..ba6bb691c346 100644
--- a/components/dashboard/Button.tsx
+++ b/components/dashboard/Button.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface ButtonProps {
   text: string;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
diff --git a/components/dashboard/GoodFirstIssues.tsx b/components/dashboard/GoodFirstIssues.tsx
index dccc6a8c48c4..29cec9a3a911 100644
--- a/components/dashboard/GoodFirstIssues.tsx
+++ b/components/dashboard/GoodFirstIssues.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
diff --git a/components/dashboard/GoodFirstIssuesTip.tsx b/components/dashboard/GoodFirstIssuesTip.tsx
index af732f506421..4a8a2197160a 100644
--- a/components/dashboard/GoodFirstIssuesTip.tsx
+++ b/components/dashboard/GoodFirstIssuesTip.tsx
@@ -1,5 +1,5 @@
 import { useFloating } from '@floating-ui/react-dom-interactions';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 /**
  * @description A tooltip that appears when the user hovers over the Good First Issues icon.
diff --git a/components/dashboard/Header.tsx b/components/dashboard/Header.tsx
index e80f13966705..03b3e2b6b741 100644
--- a/components/dashboard/Header.tsx
+++ b/components/dashboard/Header.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Button from '../buttons/Button';
 import GithubButton from '../buttons/GithubButton';
 import SlackButton from '../buttons/SlackButton';
diff --git a/components/dashboard/table/Filters.tsx b/components/dashboard/table/Filters.tsx
index 54f659e62b63..e9d8a9066c4d 100644
--- a/components/dashboard/table/Filters.tsx
+++ b/components/dashboard/table/Filters.tsx
@@ -1,6 +1,6 @@
 import { useFloating } from '@floating-ui/react-dom-interactions';
 import type { RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
diff --git a/components/dashboard/table/Row.tsx b/components/dashboard/table/Row.tsx
index 03cd73300e34..f5794faa8c4c 100644
--- a/components/dashboard/table/Row.tsx
+++ b/components/dashboard/table/Row.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
 interface RowProps {
diff --git a/components/dashboard/table/Table.tsx b/components/dashboard/table/Table.tsx
index 6cc76f1c3dab..f5153fabc979 100644
--- a/components/dashboard/table/Table.tsx
+++ b/components/dashboard/table/Table.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
 import Row from './Row';
diff --git a/components/docs/Card.tsx b/components/docs/Card.tsx
index 0743b88fc236..64f6dbc07e21 100644
--- a/components/docs/Card.tsx
+++ b/components/docs/Card.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
diff --git a/components/editor/CodeBlock.tsx b/components/editor/CodeBlock.tsx
index 9a86203cf1a8..e5bd4675e3ab 100644
--- a/components/editor/CodeBlock.tsx
+++ b/components/editor/CodeBlock.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Highlight from 'react-syntax-highlighter';
 
 import Caption from '../Caption';
diff --git a/components/faq/FAQ.tsx b/components/faq/FAQ.tsx
index 2bf8cf6a3368..54a7ac4260cb 100644
--- a/components/faq/FAQ.tsx
+++ b/components/faq/FAQ.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Accordion from '@/components/Accordion/Accordion';
 
 import { faqList } from './FAQList';
diff --git a/components/icons/Ambassador.tsx b/components/icons/Ambassador.tsx
index 4dd7e232c577..196986141f20 100644
--- a/components/icons/Ambassador.tsx
+++ b/components/icons/Ambassador.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/ArrowDown.tsx b/components/icons/ArrowDown.tsx
index 1bb35b97fd0c..c48a671637c6 100644
--- a/components/icons/ArrowDown.tsx
+++ b/components/icons/ArrowDown.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx
index 9851fceee048..fec611bd2ff3 100644
--- a/components/icons/ArrowLeft.tsx
+++ b/components/icons/ArrowLeft.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/ArrowRight.tsx b/components/icons/ArrowRight.tsx
index 0175fcc7a106..8ce9303a9662 100644
--- a/components/icons/ArrowRight.tsx
+++ b/components/icons/ArrowRight.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/ArrowUp.tsx b/components/icons/ArrowUp.tsx
index c8dd84e5716e..cc60708c2be3 100644
--- a/components/icons/ArrowUp.tsx
+++ b/components/icons/ArrowUp.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/AsyncAPI.tsx b/components/icons/AsyncAPI.tsx
index 56bd10e7c4cb..46d19c7a2c5f 100644
--- a/components/icons/AsyncAPI.tsx
+++ b/components/icons/AsyncAPI.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/AsyncAPIColorIcon.tsx b/components/icons/AsyncAPIColorIcon.tsx
index a368ae8c3c89..4ee5629c44c5 100644
--- a/components/icons/AsyncAPIColorIcon.tsx
+++ b/components/icons/AsyncAPIColorIcon.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface AsyncAPIColorLogoProps {
   // eslint-disable-next-line prettier/prettier
 
diff --git a/components/icons/Calendar.tsx b/components/icons/Calendar.tsx
index 9e63ec7bd889..e1d70f0d9be5 100644
--- a/components/icons/Calendar.tsx
+++ b/components/icons/Calendar.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/CenterMenu.tsx b/components/icons/CenterMenu.tsx
index e8e095e22eb1..22e410ac1824 100644
--- a/components/icons/CenterMenu.tsx
+++ b/components/icons/CenterMenu.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Icons for asyncapi website
  */
diff --git a/components/icons/CircularLoader.tsx b/components/icons/CircularLoader.tsx
index 7cca8dfd8fe9..0a994f0f5460 100644
--- a/components/icons/CircularLoader.tsx
+++ b/components/icons/CircularLoader.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface CircularLoaderProps {
   // eslint-disable-next-line prettier/prettier
 
diff --git a/components/icons/Clipboard.tsx b/components/icons/Clipboard.tsx
index 3379a3c87f86..c0add09acf31 100644
--- a/components/icons/Clipboard.tsx
+++ b/components/icons/Clipboard.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Code.tsx b/components/icons/Code.tsx
index d493af6a5716..676be45c99fb 100644
--- a/components/icons/Code.tsx
+++ b/components/icons/Code.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Community.tsx b/components/icons/Community.tsx
index 991dd055f5da..84d2519abf34 100644
--- a/components/icons/Community.tsx
+++ b/components/icons/Community.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Conference.tsx b/components/icons/Conference.tsx
index 4de43e9ef997..473dc0845210 100644
--- a/components/icons/Conference.tsx
+++ b/components/icons/Conference.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Contributing.tsx b/components/icons/Contributing.tsx
index 1c2365b0e823..090a7da3fa9d 100644
--- a/components/icons/Contributing.tsx
+++ b/components/icons/Contributing.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx
index 1597fbf30e03..442f11752a3a 100644
--- a/components/icons/Cross.tsx
+++ b/components/icons/Cross.tsx
@@ -1,5 +1,5 @@
+import React from 'react';
 /* eslint-disable max-len */
-
 import { twMerge } from 'tailwind-merge';
 
 /**
diff --git a/components/icons/Dashboard.tsx b/components/icons/Dashboard.tsx
index b50ef6a09bd1..fc2723b2caf0 100644
--- a/components/icons/Dashboard.tsx
+++ b/components/icons/Dashboard.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/DocsArrow.tsx b/components/icons/DocsArrow.tsx
index db52744dbf20..060b3cd1a8eb 100644
--- a/components/icons/DocsArrow.tsx
+++ b/components/icons/DocsArrow.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Documents.tsx b/components/icons/Documents.tsx
index 7e2a51d2fdd2..21df6e8112ef 100644
--- a/components/icons/Documents.tsx
+++ b/components/icons/Documents.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Exclamation.tsx b/components/icons/Exclamation.tsx
index b62b57d2b200..3e4470f82f10 100644
--- a/components/icons/Exclamation.tsx
+++ b/components/icons/Exclamation.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Explorer.tsx b/components/icons/Explorer.tsx
index e63affca85c0..acb488eb8945 100644
--- a/components/icons/Explorer.tsx
+++ b/components/icons/Explorer.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Icons for asyncapi website
  */
diff --git a/components/icons/Filter.tsx b/components/icons/Filter.tsx
index 2baca427bfcb..18279d9af2dd 100644
--- a/components/icons/Filter.tsx
+++ b/components/icons/Filter.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Generator.tsx b/components/icons/Generator.tsx
index b63d9b529ebd..81ac64042f04 100644
--- a/components/icons/Generator.tsx
+++ b/components/icons/Generator.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/GettingStarted.tsx b/components/icons/GettingStarted.tsx
index 24abb2e67b30..86cced07732c 100644
--- a/components/icons/GettingStarted.tsx
+++ b/components/icons/GettingStarted.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx
index fa988b4a5d91..9a3caa35e0b1 100644
--- a/components/icons/Github.tsx
+++ b/components/icons/Github.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/GithubActions.tsx b/components/icons/GithubActions.tsx
index ce5dfe31f3fb..393ef7417f02 100644
--- a/components/icons/GithubActions.tsx
+++ b/components/icons/GithubActions.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/GithubOrganization.tsx b/components/icons/GithubOrganization.tsx
index 44926c357d8e..ab16310c397b 100644
--- a/components/icons/GithubOrganization.tsx
+++ b/components/icons/GithubOrganization.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/GoogleCalendar.tsx b/components/icons/GoogleCalendar.tsx
index 9caee67a7cd2..cf85306c9c9b 100644
--- a/components/icons/GoogleCalendar.tsx
+++ b/components/icons/GoogleCalendar.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/GradCap.tsx b/components/icons/GradCap.tsx
index a4e9e33fa2cc..e568b511aeca 100644
--- a/components/icons/GradCap.tsx
+++ b/components/icons/GradCap.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Guide.tsx b/components/icons/Guide.tsx
index 5487b1436e9c..5c72487fa8cc 100644
--- a/components/icons/Guide.tsx
+++ b/components/icons/Guide.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Home.tsx b/components/icons/Home.tsx
index 4cdc965a80b3..63df2794e49d 100644
--- a/components/icons/Home.tsx
+++ b/components/icons/Home.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Hub.tsx b/components/icons/Hub.tsx
index dc8711a293a5..3bdf6f296ead 100644
--- a/components/icons/Hub.tsx
+++ b/components/icons/Hub.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/InfoIcon.tsx b/components/icons/InfoIcon.tsx
index 9dc8268ca469..e45408f090df 100644
--- a/components/icons/InfoIcon.tsx
+++ b/components/icons/InfoIcon.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/LightBulb.tsx b/components/icons/LightBulb.tsx
index b2df353d48de..884e8b618d4a 100644
--- a/components/icons/LightBulb.tsx
+++ b/components/icons/LightBulb.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/LinkedIn.tsx b/components/icons/LinkedIn.tsx
index f01c9b6622bc..795f097bf9c2 100644
--- a/components/icons/LinkedIn.tsx
+++ b/components/icons/LinkedIn.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Loupe.tsx b/components/icons/Loupe.tsx
index 924e9e3ade61..c1c8219866e4 100644
--- a/components/icons/Loupe.tsx
+++ b/components/icons/Loupe.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Meetings.tsx b/components/icons/Meetings.tsx
index 2973b2476cc1..d737ec863dd0 100644
--- a/components/icons/Meetings.tsx
+++ b/components/icons/Meetings.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Migration.tsx b/components/icons/Migration.tsx
index 110edda11e79..6d7d1358f371 100644
--- a/components/icons/Migration.tsx
+++ b/components/icons/Migration.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Modelina.tsx b/components/icons/Modelina.tsx
index 15e0ae8f0a46..73ff108c8ee0 100644
--- a/components/icons/Modelina.tsx
+++ b/components/icons/Modelina.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/NavItemDropdown.tsx b/components/icons/NavItemDropdown.tsx
index bb0a7ba63bd2..4a1bcfb98cda 100644
--- a/components/icons/NavItemDropdown.tsx
+++ b/components/icons/NavItemDropdown.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Newsroom.tsx b/components/icons/Newsroom.tsx
index f83e0b0ce558..e744b9d68081 100644
--- a/components/icons/Newsroom.tsx
+++ b/components/icons/Newsroom.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Paper.tsx b/components/icons/Paper.tsx
index 5f85397686a6..df34302e7ff4 100644
--- a/components/icons/Paper.tsx
+++ b/components/icons/Paper.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Parser.tsx b/components/icons/Parser.tsx
index 4a1e67123307..452c049623c0 100644
--- a/components/icons/Parser.tsx
+++ b/components/icons/Parser.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Plant.tsx b/components/icons/Plant.tsx
index 94ba92b1aa32..403ede7dd662 100644
--- a/components/icons/Plant.tsx
+++ b/components/icons/Plant.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Plugins.tsx b/components/icons/Plugins.tsx
index f5942a0ff316..d661d900d589 100644
--- a/components/icons/Plugins.tsx
+++ b/components/icons/Plugins.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/PowerPlug.tsx b/components/icons/PowerPlug.tsx
index 98ddc84e75ab..c220ad92de7e 100644
--- a/components/icons/PowerPlug.tsx
+++ b/components/icons/PowerPlug.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/QuestionMark.tsx b/components/icons/QuestionMark.tsx
index 547b3957edd6..c771e22d95da 100644
--- a/components/icons/QuestionMark.tsx
+++ b/components/icons/QuestionMark.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Quote.tsx b/components/icons/Quote.tsx
index 6410cd56b8c9..b47c1079c3fe 100644
--- a/components/icons/Quote.tsx
+++ b/components/icons/Quote.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/React.tsx b/components/icons/React.tsx
index 3f952bbea6c5..ed6895afee68 100644
--- a/components/icons/React.tsx
+++ b/components/icons/React.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Rocket.tsx b/components/icons/Rocket.tsx
index d3bdb651605a..8ab3bb80c53d 100644
--- a/components/icons/Rocket.tsx
+++ b/components/icons/Rocket.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Search.tsx b/components/icons/Search.tsx
index 16595bb63eac..4ddc06b68717 100644
--- a/components/icons/Search.tsx
+++ b/components/icons/Search.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/SearchIcon.tsx b/components/icons/SearchIcon.tsx
index 7f2ab5c4b47a..2d45ef09de26 100644
--- a/components/icons/SearchIcon.tsx
+++ b/components/icons/SearchIcon.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Icon for search button
  * @param {string} props.className - The class name for styling the icon.
diff --git a/components/icons/Slack.tsx b/components/icons/Slack.tsx
index 8de6d0d2a239..26bf8eff0ba0 100644
--- a/components/icons/Slack.tsx
+++ b/components/icons/Slack.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Spec.tsx b/components/icons/Spec.tsx
index 103992fe056a..506016b490f1 100644
--- a/components/icons/Spec.tsx
+++ b/components/icons/Spec.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Subscribe.tsx b/components/icons/Subscribe.tsx
index 4da24682381d..bfb7eb67fd15 100644
--- a/components/icons/Subscribe.tsx
+++ b/components/icons/Subscribe.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/TSC.tsx b/components/icons/TSC.tsx
index 0012fb6fa516..ade1c0fdacbb 100644
--- a/components/icons/TSC.tsx
+++ b/components/icons/TSC.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Tools.tsx b/components/icons/Tools.tsx
index 2b9f918a478a..969ff19a056d 100644
--- a/components/icons/Tools.tsx
+++ b/components/icons/Tools.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Tutorials.tsx b/components/icons/Tutorials.tsx
index 6a402cddcad4..86a6895c4065 100644
--- a/components/icons/Tutorials.tsx
+++ b/components/icons/Tutorials.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Twitch.tsx b/components/icons/Twitch.tsx
index 64527fb026e4..557c7f671310 100644
--- a/components/icons/Twitch.tsx
+++ b/components/icons/Twitch.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Twitter.tsx b/components/icons/Twitter.tsx
index 92a02e301815..4ab31db70738 100644
--- a/components/icons/Twitter.tsx
+++ b/components/icons/Twitter.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/UseCases.tsx b/components/icons/UseCases.tsx
index b443e5ad00d1..d8f094ccd2bb 100644
--- a/components/icons/UseCases.tsx
+++ b/components/icons/UseCases.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Users.tsx b/components/icons/Users.tsx
index 9f3a34b72b5a..bedc0213e1a3 100644
--- a/components/icons/Users.tsx
+++ b/components/icons/Users.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/Webinar.tsx b/components/icons/Webinar.tsx
index 3365d400663a..3be0940885a9 100644
--- a/components/icons/Webinar.tsx
+++ b/components/icons/Webinar.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/YouTube.tsx b/components/icons/YouTube.tsx
index 77b70840f94e..c3df3775ef00 100644
--- a/components/icons/YouTube.tsx
+++ b/components/icons/YouTube.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/icons/YouTubeGray.tsx b/components/icons/YouTubeGray.tsx
index 38cd655397bb..4e0552130fb3 100644
--- a/components/icons/YouTubeGray.tsx
+++ b/components/icons/YouTubeGray.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website
diff --git a/components/languageSelector/LanguageSelect.tsx b/components/languageSelector/LanguageSelect.tsx
index 4641a7909d53..d2d4f0750514 100644
--- a/components/languageSelector/LanguageSelect.tsx
+++ b/components/languageSelector/LanguageSelect.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { SelectProps } from '../form/Select';
diff --git a/components/layout/BlogLayout.tsx b/components/layout/BlogLayout.tsx
index 1dd353b0f225..a1570bf25c6b 100644
--- a/components/layout/BlogLayout.tsx
+++ b/components/layout/BlogLayout.tsx
@@ -2,6 +2,7 @@ import moment from 'moment';
 import ErrorPage from 'next/error';
 import HtmlHead from 'next/head';
 import { useRouter } from 'next/router';
+import React from 'react';
 
 import type { IPosts } from '@/types/post';
 
diff --git a/components/layout/Column.tsx b/components/layout/Column.tsx
index 051848c8d568..59b865d8fb7a 100644
--- a/components/layout/Column.tsx
+++ b/components/layout/Column.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface IColumnProps {
   children: React.ReactNode;
 }
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index 2fab40d83f0a..b395c9445edf 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -1,7 +1,7 @@
 import ErrorPage from 'next/error';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import type { NavigationItems } from '@/types/context/DocsContext';
 import type { IPost } from '@/types/post';
diff --git a/components/layout/GenericLayout.tsx b/components/layout/GenericLayout.tsx
index 309f3c384107..2521f186d8cf 100644
--- a/components/layout/GenericLayout.tsx
+++ b/components/layout/GenericLayout.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 // import AnnouncementHero from '../campaigns/AnnoucementHero';
 import Head from '../Head';
 import Container from './Container';
diff --git a/components/layout/GenericPostLayout.tsx b/components/layout/GenericPostLayout.tsx
index 4bf82198c285..b814214f5fd1 100644
--- a/components/layout/GenericPostLayout.tsx
+++ b/components/layout/GenericPostLayout.tsx
@@ -1,5 +1,6 @@
 import ErrorPage from 'next/error';
 import { useRouter } from 'next/router';
+import React from 'react';
 
 import type { IPosts } from '@/types/post';
 
diff --git a/components/layout/GenericWideLayout.tsx b/components/layout/GenericWideLayout.tsx
index 32938fb61c36..48d2b7ec4158 100644
--- a/components/layout/GenericWideLayout.tsx
+++ b/components/layout/GenericWideLayout.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 // import AnnouncementHero from '../campaigns/AnnoucementHero';
 import Head from '../Head';
 import Row from './Row';
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index efbf01814dc7..4db249bbb33e 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from 'next/router';
+import React from 'react';
 
 import type { NavigationItems } from '@/types/context/DocsContext';
 import type { IPost, IPosts } from '@/types/post';
diff --git a/components/layout/Row.tsx b/components/layout/Row.tsx
index ca405b7978de..679bf3be394b 100644
--- a/components/layout/Row.tsx
+++ b/components/layout/Row.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface IRowProps {
   children: React.ReactNode;
 }
diff --git a/components/link.tsx b/components/link.tsx
index 40415ceccdde..86efcef06b06 100644
--- a/components/link.tsx
+++ b/components/link.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import React from 'react';
 
 import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
diff --git a/components/logos/Adidas.tsx b/components/logos/Adidas.tsx
index f9e8fd285a91..395c7212e615 100644
--- a/components/logos/Adidas.tsx
+++ b/components/logos/Adidas.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Logo for Adidas
  * @param {string} className - used to style the svg
diff --git a/components/logos/AsyncAPILogo.tsx b/components/logos/AsyncAPILogo.tsx
index 6b6a66de3fd2..5c8b91670eb2 100644
--- a/components/logos/AsyncAPILogo.tsx
+++ b/components/logos/AsyncAPILogo.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface IAsyncAPILogoProps {
diff --git a/components/logos/Axway.tsx b/components/logos/Axway.tsx
index e00a52581af9..629614217f8d 100644
--- a/components/logos/Axway.tsx
+++ b/components/logos/Axway.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Logo for Axway
  * @param {string} className - used to style the svg
diff --git a/components/logos/SAP.tsx b/components/logos/SAP.tsx
index a521616ca2f4..2d896481c112 100644
--- a/components/logos/SAP.tsx
+++ b/components/logos/SAP.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 /**
  * @description Logo for SAP
diff --git a/components/logos/Salesforce.tsx b/components/logos/Salesforce.tsx
index f0441b5af799..3b77b53b817b 100644
--- a/components/logos/Salesforce.tsx
+++ b/components/logos/Salesforce.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Logo for Salesforce
  * @param {string} className - used to style the svg
diff --git a/components/logos/Slack.tsx b/components/logos/Slack.tsx
index a695a4ea78d4..8b68c81fa42d 100644
--- a/components/logos/Slack.tsx
+++ b/components/logos/Slack.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Logo for Slack
  * @param {string} className - used to style the svg
diff --git a/components/navigation/BlogPostCard.stories.tsx b/components/navigation/BlogPostCard.stories.tsx
index 47d57094fa11..5b12a3313450 100644
--- a/components/navigation/BlogPostCard.stories.tsx
+++ b/components/navigation/BlogPostCard.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import BlogPostItem from './BlogPostItem';
 
diff --git a/components/navigation/CommunityPanel.tsx b/components/navigation/CommunityPanel.tsx
index 82306db1284a..2a6f0fd451b7 100644
--- a/components/navigation/CommunityPanel.tsx
+++ b/components/navigation/CommunityPanel.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import communityItems from './communityItems';
 import FlyoutMenu from './FlyoutMenu';
 
diff --git a/components/navigation/DocsNav.tsx b/components/navigation/DocsNav.tsx
index d0ee433b5733..83bf94294f27 100644
--- a/components/navigation/DocsNav.tsx
+++ b/components/navigation/DocsNav.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { buckets } from '../data/buckets';
 import DocsArrow from '../icons/DocsArrow';
diff --git a/components/navigation/DocsNavItem.tsx b/components/navigation/DocsNavItem.tsx
index 43d4af17a6ff..eadc6f464184 100644
--- a/components/navigation/DocsNavItem.tsx
+++ b/components/navigation/DocsNavItem.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 export interface DocsNavItemProps {
   title: string;
diff --git a/components/navigation/DocsNavWrapper.tsx b/components/navigation/DocsNavWrapper.tsx
index b7ad00dbcd85..c51f0cb2033e 100644
--- a/components/navigation/DocsNavWrapper.tsx
+++ b/components/navigation/DocsNavWrapper.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { IDocsTree, IPost } from '@/types/post';
 
 import { DOCS_INDEX_NAME, SearchButton } from '../AlgoliaSearch';
diff --git a/components/navigation/Filter.tsx b/components/navigation/Filter.tsx
index d7f07c2e3224..7b69f4702931 100644
--- a/components/navigation/Filter.tsx
+++ b/components/navigation/Filter.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Select from '../form/Select';
 import { applyFilterList, onFilterApply } from '../helpers/applyFilter';
diff --git a/components/navigation/FlyoutMenu.tsx b/components/navigation/FlyoutMenu.tsx
index b6faf8269fe3..fc5ab7d41a4e 100644
--- a/components/navigation/FlyoutMenu.tsx
+++ b/components/navigation/FlyoutMenu.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { MenuItem } from './MenuBlocks';
 import MenuBlocks from './MenuBlocks';
 
diff --git a/components/navigation/Label.tsx b/components/navigation/Label.tsx
index 53315b0ea45a..25b8d5e7ef69 100644
--- a/components/navigation/Label.tsx
+++ b/components/navigation/Label.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 enum LabelColor {
   Gray = 'gray',
   Green = 'green'
diff --git a/components/navigation/LearningPanel.tsx b/components/navigation/LearningPanel.tsx
index 090cc7a16908..a2882b094ea2 100644
--- a/components/navigation/LearningPanel.tsx
+++ b/components/navigation/LearningPanel.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { buckets } from '../data/buckets';
 import FlyoutMenu from './FlyoutMenu';
 
diff --git a/components/navigation/MenuBlocks.tsx b/components/navigation/MenuBlocks.tsx
index 1f239ba8b17e..81548f97ec0c 100644
--- a/components/navigation/MenuBlocks.tsx
+++ b/components/navigation/MenuBlocks.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from 'next/router';
+import React from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx
index 1c6f57e130f9..8b0ccd740374 100644
--- a/components/navigation/MobileNavMenu.tsx
+++ b/components/navigation/MobileNavMenu.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { SearchButton } from '../AlgoliaSearch';
 import NavItemDropdown from '../icons/NavItemDropdown';
diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index e76330c41cff..d0fd2ca6fa02 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
diff --git a/components/navigation/SubCategoryDocsNav.tsx b/components/navigation/SubCategoryDocsNav.tsx
index 63f3a60337ac..2b72003a582a 100644
--- a/components/navigation/SubCategoryDocsNav.tsx
+++ b/components/navigation/SubCategoryDocsNav.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import DocsArrow from '../icons/DocsArrow';
 import DocsNavItem from './DocsNavItem';
diff --git a/components/navigation/ToolsPanel.tsx b/components/navigation/ToolsPanel.tsx
index 6571bd6d3708..a90c248b2803 100644
--- a/components/navigation/ToolsPanel.tsx
+++ b/components/navigation/ToolsPanel.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import FlyoutMenu from './FlyoutMenu';
 import toolingItems from './toolingItems';
 
diff --git a/components/navigation/TutorialList.tsx b/components/navigation/TutorialList.tsx
index a7cd0b8a790f..f2cfea0d5a23 100644
--- a/components/navigation/TutorialList.tsx
+++ b/components/navigation/TutorialList.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
 import type { DocsContextType } from '@/types/context/DocsContext';
 import type { IDoc } from '@/types/post';
diff --git a/components/navigation/communityItems.tsx b/components/navigation/communityItems.tsx
index e5df44e22808..aa25ac89a1b3 100644
--- a/components/navigation/communityItems.tsx
+++ b/components/navigation/communityItems.tsx
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import IconAmbassador from '../icons/Ambassador';
 import IconContributing from '../icons/Contributing';
 import IconDashboard from '../icons/Dashboard';
diff --git a/components/navigation/learningItems.tsx b/components/navigation/learningItems.tsx
index 40e9b0d670e8..d8f538bb8652 100644
--- a/components/navigation/learningItems.tsx
+++ b/components/navigation/learningItems.tsx
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import IconGradCap from '../icons/GradCap';
 import IconGuide from '../icons/Guide';
 import IconMigration from '../icons/Migration';
diff --git a/components/navigation/toolingItems.tsx b/components/navigation/toolingItems.tsx
index 8c18db3bec06..e637a62d0070 100644
--- a/components/navigation/toolingItems.tsx
+++ b/components/navigation/toolingItems.tsx
@@ -1,4 +1,5 @@
 import { TerminalIcon } from '@heroicons/react/outline';
+import type React from 'react';
 
 import IconGenerator from '../icons/Generator';
 import IconGithubActions from '../icons/GithubActions';
diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx
index 515d0d0a2f66..fd459f2977a9 100644
--- a/components/newsroom/FeaturedBlogPost.tsx
+++ b/components/newsroom/FeaturedBlogPost.tsx
@@ -1,5 +1,6 @@
 import moment from 'moment';
 import Link from 'next/link';
+import React from 'react';
 import TextTruncate from 'react-text-truncate';
 
 import { BlogPostType } from '@/types/components/navigation/BlogPostType';
diff --git a/components/newsroom/Newsroom.tsx b/components/newsroom/Newsroom.tsx
index 649263afaebe..87b8bdff1809 100644
--- a/components/newsroom/Newsroom.tsx
+++ b/components/newsroom/Newsroom.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { TwitterTimelineEmbed } from 'react-twitter-embed';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
diff --git a/components/newsroom/NewsroomBlogPosts.tsx b/components/newsroom/NewsroomBlogPosts.tsx
index c5036b126995..7e79c1fb5342 100644
--- a/components/newsroom/NewsroomBlogPosts.tsx
+++ b/components/newsroom/NewsroomBlogPosts.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { A11y, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
diff --git a/components/newsroom/NewsroomSection.tsx b/components/newsroom/NewsroomSection.tsx
index c3a3e7df1cd7..7e660e69dfe4 100644
--- a/components/newsroom/NewsroomSection.tsx
+++ b/components/newsroom/NewsroomSection.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/components/newsroom/NewsroomYoutube.tsx b/components/newsroom/NewsroomYoutube.tsx
index 91015b937883..ced5fceedbe2 100644
--- a/components/newsroom/NewsroomYoutube.tsx
+++ b/components/newsroom/NewsroomYoutube.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { A11y, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
diff --git a/components/newsroom/swiper.tsx b/components/newsroom/swiper.tsx
index 1118cc36e8f4..4f040cbeca6c 100644
--- a/components/newsroom/swiper.tsx
+++ b/components/newsroom/swiper.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 /**
diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx
index e82504eae658..34787b7252e6 100644
--- a/components/roadmap/RoadmapItem.tsx
+++ b/components/roadmap/RoadmapItem.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 // Since a roadmap item can contain nested roadmap lists, we need to import RoadmapList to display them.
 /* eslint-disable import/no-cycle*/
diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
index b9ad17296622..57d500978bf4 100644
--- a/components/roadmap/RoadmapList.tsx
+++ b/components/roadmap/RoadmapList.tsx
@@ -1,5 +1,7 @@
 // Since a RoadmapList may contain other RoadmapItems, we need to import RoadmapItem to display them.
 /* eslint-disable import/no-cycle*/
+import React from 'react';
+
 import RoadmapItem from './RoadmapItem';
 
 interface IRoadmapListProps {
diff --git a/components/roadmap/RoadmapPill.tsx b/components/roadmap/RoadmapPill.tsx
index e89b9dba463c..d73ac46e84bf 100644
--- a/components/roadmap/RoadmapPill.tsx
+++ b/components/roadmap/RoadmapPill.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import IconArrowRight from '../icons/ArrowRight';
 import Modal from '../Modal';
diff --git a/components/slack/index.tsx b/components/slack/index.tsx
index 70bdef3e739b..5d3b4a17fd64 100644
--- a/components/slack/index.tsx
+++ b/components/slack/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import SlackMessage from './Message';
 
 interface SlackProps {
diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
index 277f4332ad33..3729ffcc7e09 100644
--- a/components/sponsors/GoldSponsors.tsx
+++ b/components/sponsors/GoldSponsors.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { goldSponsors } from './GoldSponsorsList';
 
 interface GoldSponsorsProps {
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
index 62c8868980a6..4a737aef7df9 100644
--- a/components/sponsors/SilverSponsors.tsx
+++ b/components/sponsors/SilverSponsors.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Silversponsors } from './SilverSponsorsList';
 
 interface SilverSponsorsProps {
diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/Sponsors.tsx
index af0fed3882e3..fd5aff751179 100644
--- a/components/sponsors/Sponsors.tsx
+++ b/components/sponsors/Sponsors.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { sponsors } from './SponsorsList';
 
 interface SponsorsProps {
diff --git a/components/tools/CategoryDropdown.tsx b/components/tools/CategoryDropdown.tsx
index f865a226021c..02d091008a0f 100644
--- a/components/tools/CategoryDropdown.tsx
+++ b/components/tools/CategoryDropdown.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ToolsListData } from '@/types/components/tools/ToolDataType';
 
 import ToolsDataList from '../../config/tools.json';
diff --git a/components/tools/Checkbox.stories.tsx b/components/tools/Checkbox.stories.tsx
index d9691aff1813..7445b41b4123 100644
--- a/components/tools/Checkbox.stories.tsx
+++ b/components/tools/Checkbox.stories.tsx
@@ -1,5 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import type { CheckboxProps } from '@/types/components/tools/CheckboxPropsType';
 
diff --git a/components/tools/Checkbox.tsx b/components/tools/Checkbox.tsx
index 439bb040be02..25b4bceb2c2a 100644
--- a/components/tools/Checkbox.tsx
+++ b/components/tools/Checkbox.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { CheckboxProps } from '@/types/components/tools/CheckboxPropsType';
diff --git a/components/tools/Filters.tsx b/components/tools/Filters.tsx
index 0ca822b7eea9..4938828086c6 100644
--- a/components/tools/Filters.tsx
+++ b/components/tools/Filters.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { Language, Technology, VisibleDataListType } from '@/types/components/tools/ToolDataType';
diff --git a/components/tools/FiltersDisplay.tsx b/components/tools/FiltersDisplay.tsx
index 945481cae243..63c34db8dc17 100644
--- a/components/tools/FiltersDisplay.tsx
+++ b/components/tools/FiltersDisplay.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface FiltersDisplayProps {
diff --git a/components/tools/FiltersDropdown.tsx b/components/tools/FiltersDropdown.tsx
index beb68e81eb5a..6c473541e871 100644
--- a/components/tools/FiltersDropdown.tsx
+++ b/components/tools/FiltersDropdown.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType';
diff --git a/components/tools/Tags.tsx b/components/tools/Tags.tsx
index 7609b2237415..0fd1c2453b2e 100644
--- a/components/tools/Tags.tsx
+++ b/components/tools/Tags.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface SelectTagsProps {
   // eslint-disable-next-line prettier/prettier
 
diff --git a/components/tools/Toggle.stories.tsx b/components/tools/Toggle.stories.tsx
index 2fcaf81c26df..5e72492197ea 100644
--- a/components/tools/Toggle.stories.tsx
+++ b/components/tools/Toggle.stories.tsx
@@ -1,5 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import type { ToggleProps } from '@/types/components/tools/TogglePropsType';
 
diff --git a/components/tools/Toggle.tsx b/components/tools/Toggle.tsx
index bfa324b8538b..ee7066e7b900 100644
--- a/components/tools/Toggle.tsx
+++ b/components/tools/Toggle.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { ToggleProps } from '@/types/components/tools/TogglePropsType';
diff --git a/components/tools/ToolsDashboard.tsx b/components/tools/ToolsDashboard.tsx
index 920aaee66eb3..ff9a364c87d4 100644
--- a/components/tools/ToolsDashboard.tsx
+++ b/components/tools/ToolsDashboard.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { createRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { ToolsListData } from '@/types/components/tools/ToolDataType';
 
diff --git a/components/tools/ToolsList.tsx b/components/tools/ToolsList.tsx
index b6e6eeeafe51..5ce95974d722 100644
--- a/components/tools/ToolsList.tsx
+++ b/components/tools/ToolsList.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ToolsListData } from '@/types/components/tools/ToolDataType';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index 261a83d96f49..17f8eadcce88 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
diff --git a/components/typography/TextLink.tsx b/components/typography/TextLink.tsx
index 4b789ba9e0d7..c8f2bb4a6281 100644
--- a/components/typography/TextLink.tsx
+++ b/components/typography/TextLink.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface TextLinkProps {
diff --git a/context/AppContext.tsx b/context/AppContext.tsx
index 696c2ae6f2db..5d53b72dfe77 100644
--- a/context/AppContext.tsx
+++ b/context/AppContext.tsx
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
-import { AppContextType } from '@/types/context/AppContext';
 
-export default createContext<AppContextType>({ path: "" });
+import type { AppContextType } from '@/types/context/AppContext';
+
+export default createContext<AppContextType>({ path: '' });
diff --git a/context/GenericPostContext.tsx b/context/GenericPostContext.tsx
index 65b510b15a84..6d9b519d7bd3 100644
--- a/context/GenericPostContext.tsx
+++ b/context/GenericPostContext.tsx
@@ -2,4 +2,4 @@ import { createContext } from 'react';
 
 import type { IPosts } from '@/types/post';
 
-export default createContext<{ post: IPosts['blog'][number] | IPosts['docs'][number]} | undefined>(undefined);
+export default createContext<{ post: IPosts['blog'][number] | IPosts['docs'][number] } | undefined>(undefined);
diff --git a/context/ToolFilterContext.tsx b/context/ToolFilterContext.tsx
index b3ea042f49d3..0b2b582dcc70 100644
--- a/context/ToolFilterContext.tsx
+++ b/context/ToolFilterContext.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { createContext, useEffect, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 
 interface ToolFilterContextProps {
   isPaid: string;
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 80484623fe7b..b220a1b44841 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,4 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+import React from 'react';
 
 import i18nextConfig from '../next-i18next.config';
 
diff --git a/pages/casestudies/[id].tsx b/pages/casestudies/[id].tsx
index d200869dc276..1a0a22d4e65b 100644
--- a/pages/casestudies/[id].tsx
+++ b/pages/casestudies/[id].tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { MDXRemote } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
+import React from 'react';
 
 import { readYamlFile } from '@/components/helpers/read-yaml-file';
 import type { ICaseStudy } from '@/types/post';
diff --git a/pages/casestudies/index.tsx b/pages/casestudies/index.tsx
index 7216a5bbd837..aa671f2d4de9 100644
--- a/pages/casestudies/index.tsx
+++ b/pages/casestudies/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ICaseStudies } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
diff --git a/pages/community/dashboard.tsx b/pages/community/dashboard.tsx
index 8b91096b6aef..bfec4d96cc18 100644
--- a/pages/community/dashboard.tsx
+++ b/pages/community/dashboard.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import GoodFirstIssues from '../../components/dashboard/GoodFirstIssues';
 import Header from '../../components/dashboard/Header';
 import Table from '../../components/dashboard/table/Table';
diff --git a/pages/community/newsroom.tsx b/pages/community/newsroom.tsx
index a7e7c65e446a..5538fceeed07 100644
--- a/pages/community/newsroom.tsx
+++ b/pages/community/newsroom.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Container from '../../components/layout/Container';
 import GenericLayout from '../../components/layout/GenericLayout';
 import NewsroomSection from '../../components/newsroom/Newsroom';
diff --git a/pages/community/tsc.tsx b/pages/community/tsc.tsx
index 2ec652b609ff..755652736f1b 100644
--- a/pages/community/tsc.tsx
+++ b/pages/community/tsc.tsx
@@ -1,5 +1,5 @@
 import { sortBy } from 'lodash';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import type { Tsc } from '@/types/pages/community/Community';
 
diff --git a/pages/tools/cli.tsx b/pages/tools/cli.tsx
index c9f0cae53129..a6e49a0bfe46 100644
--- a/pages/tools/cli.tsx
+++ b/pages/tools/cli.tsx
@@ -1,4 +1,5 @@
 import { BadgeCheckIcon, CodeIcon, DocumentAddIcon, GlobeIcon } from '@heroicons/react/outline';
+import React from 'react';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
index 813250bc8b09..8a6b70124e5d 100644
--- a/pages/tools/generator.tsx
+++ b/pages/tools/generator.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
diff --git a/pages/tools/github-actions.tsx b/pages/tools/github-actions.tsx
index c6b7b582dd7a..b74c70c0e147 100644
--- a/pages/tools/github-actions.tsx
+++ b/pages/tools/github-actions.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 import GithubButton from '../../components/buttons/GithubButton';
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
index 7ed98f27b12f..9c35fc55fa87 100644
--- a/pages/tools/index.tsx
+++ b/pages/tools/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import ToolsDashboard from '@/components/tools/ToolsDashboard';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
diff --git a/pages/tools/parsers.tsx b/pages/tools/parsers.tsx
index d3d83558823e..ff6704ee1097 100644
--- a/pages/tools/parsers.tsx
+++ b/pages/tools/parsers.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 import GithubButton from '../../components/buttons/GithubButton';