diff --git a/packages/blade/src/components/ActionList/ActionList.stories.tsx b/packages/blade/src/components/ActionList/ActionList.stories.tsx
index e92896a6765..1ab7df8bb91 100644
--- a/packages/blade/src/components/ActionList/ActionList.stories.tsx
+++ b/packages/blade/src/components/ActionList/ActionList.stories.tsx
@@ -50,7 +50,7 @@ const Page = (): React.ReactElement => {
               Button 
           } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
               return (
                   <Box backgroundColor="surface.background.gray.intense">
                   <ActionList>
diff --git a/packages/blade/src/components/ActionList/docs/stories.ts b/packages/blade/src/components/ActionList/docs/stories.ts
index 89aeb39521d..fe544752ad7 100644
--- a/packages/blade/src/components/ActionList/docs/stories.ts
+++ b/packages/blade/src/components/ActionList/docs/stories.ts
@@ -17,7 +17,7 @@ const Playground = `
     Button 
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -62,7 +62,7 @@ const Playground = `
 const ActionList = `
   import { Box, ActionList, ActionListItem } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -88,7 +88,7 @@ const ActionListItem = `
     HomeIcon 
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
@@ -121,7 +121,7 @@ const ActionListSection = `
     ActionListSection,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
     <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
index 14cd45d04ac..ea25253cb99 100644
--- a/packages/blade/src/components/Amount/Amount.stories.tsx
+++ b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -33,7 +33,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Amount } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return <Amount value={10000} />;
         }
         export default App;
diff --git a/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx b/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
index 49c4a0604c2..a4c8fe217ab 100644
--- a/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
+++ b/packages/blade/src/components/Avatar/docs/Avatar.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Avatar } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Avatar name="Nitin Kumar" src="https://avatars.githubusercontent.com/u/46647141?v=4" />
           )
diff --git a/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx b/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx
index d5ad1482ff6..9d7ee1066d4 100644
--- a/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx
+++ b/packages/blade/src/components/Avatar/docs/AvatarGroup.stories.tsx
@@ -21,7 +21,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Avatar, AvatarGroup } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <AvatarGroup>
               <Avatar color="primary" name="Kamlesh Chandnani" />
diff --git a/packages/blade/src/components/Badge/Badge.stories.tsx b/packages/blade/src/components/Badge/Badge.stories.tsx
index a3824e5edd4..4d59ae76a59 100644
--- a/packages/blade/src/components/Badge/Badge.stories.tsx
+++ b/packages/blade/src/components/Badge/Badge.stories.tsx
@@ -22,7 +22,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Badge, InfoIcon } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Badge color="neutral" icon={InfoIcon}>
               Boop
diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
index 1e309f4c759..93ac4f9172f 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -84,7 +84,7 @@ const Page = (): React.ReactElement => {
             Text,
           } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             const [isOpen, setIsOpen] = React.useState(false);
 
             return (
diff --git a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
index 9895dee6a02..797738b0e0d 100644
--- a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
+++ b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx
@@ -118,7 +118,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
           {`
             import { Box, Text } from '@razorpay/blade/components'
 
-            function App(): React.ReactElement {
+            function App() {
               return (
                 <Box 
                   as="section" // renders as <section> tag instead of <div>
@@ -185,7 +185,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
             {`
               import { Box, Text } from '@razorpay/blade/components'
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <>
                     <Box 
@@ -238,7 +238,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
             code={`
              import { Box, Text } from '@razorpay/blade/components';
 
-             function App(): React.ReactElement {
+             function App() {
                return (
                 <>
                   <Box display={{ base: 'none', m: 'block' }}><Text>🖥 Desktop View</Text></Box>
@@ -310,7 +310,7 @@ function LayoutPrimitivesDocs(): React.ReactElement {
           {`
                 import { Text } from '@razorpay/blade/components'
 
-                function App(): React.ReactElement {
+                function App() {
                   return (
                     <>
                       {/** ❌ No need of Box wrappers */}
diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx
index 0ffc1eac8e2..78430e82b18 100644
--- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx
+++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -31,7 +31,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Box, Breadcrumb, BreadcrumbItem, HomeIcon } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Box padding="spacing.4">
               <Breadcrumb>
diff --git a/packages/blade/src/components/Button/Button/Button.stories.tsx b/packages/blade/src/components/Button/Button/Button.stories.tsx
index 639683fe6a3..74ece0252a4 100644
--- a/packages/blade/src/components/Button/Button/Button.stories.tsx
+++ b/packages/blade/src/components/Button/Button/Button.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): ReactElement => {
         {`
         import { Button } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Try changing variant here to secondary
             <Button 
diff --git a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
index 35b113038ee..518b592790b 100644
--- a/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
+++ b/packages/blade/src/components/ButtonGroup/docs/ButtonGroup.stories.tsx
@@ -30,7 +30,7 @@ const Page = (): React.ReactElement => {
           DownloadIcon,
         } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <ButtonGroup>
               <Button icon={RefreshIcon}>Sync</Button>
diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
index 66d86b4f518..b340aaaf80a 100644
--- a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Checkbox } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Check console
             <Checkbox onChange={(e) => console.log(e.isChecked)}>
diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
index 799e45b6911..9971fdbd064 100644
--- a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): React.ReactElement => {
         {`
           import { CheckboxGroup, Checkbox } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <CheckboxGroup 
                 label="Where do you want to collect payments?"
diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
index e23c339bccc..4c490435b4a 100644
--- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx
+++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
@@ -46,7 +46,7 @@ const Page = (): React.ReactElement => {
         {`
           import { Box, Chip, ChipGroup, Text } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Box>
                 <ChipGroup
diff --git a/packages/blade/src/components/Counter/Counter.stories.tsx b/packages/blade/src/components/Counter/Counter.stories.tsx
index 6e85f0487f9..252a96386ef 100644
--- a/packages/blade/src/components/Counter/Counter.stories.tsx
+++ b/packages/blade/src/components/Counter/Counter.stories.tsx
@@ -21,7 +21,7 @@ const Page = (): ReactElement => {
         {`
           import { Counter } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               // Change values to anything less than 99 to see change
               <Counter max={99} value={140} />
diff --git a/packages/blade/src/components/DatePicker/DatePicker.stories.tsx b/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
index 15a60bc8301..a4666a30036 100644
--- a/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
+++ b/packages/blade/src/components/DatePicker/DatePicker.stories.tsx
@@ -87,7 +87,7 @@ export default {
             {`
               import { DatePicker } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <DatePicker 
                     label="Name"
diff --git a/packages/blade/src/components/Divider/Divider.stories.tsx b/packages/blade/src/components/Divider/Divider.stories.tsx
index e636c009891..27e98cf3539 100644
--- a/packages/blade/src/components/Divider/Divider.stories.tsx
+++ b/packages/blade/src/components/Divider/Divider.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): React.ReactElement => {
             CardBody
           } from "@razorpay/blade/components";
           
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Card>
                 <CardBody>
diff --git a/packages/blade/src/components/Drawer/docs/stories.ts b/packages/blade/src/components/Drawer/docs/stories.ts
index f265f0afeaf..a530851ef69 100644
--- a/packages/blade/src/components/Drawer/docs/stories.ts
+++ b/packages/blade/src/components/Drawer/docs/stories.ts
@@ -435,7 +435,7 @@ const DrawerWithTableStory = `import React, { useState } from 'react';
     );
   };
 
-  function App(): React.ReactElement {
+  function App() {
     const [selectedItem, setSelectedItem] = useState<Item | undefined>(undefined);
     const [showDrawer, setShowDrawer] = useState(false);
     const { theme } = useTheme();
diff --git a/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx b/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx
index 0bd83ab9582..0b02715bc7d 100644
--- a/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx
+++ b/packages/blade/src/components/Dropdown/docs/autoCompleteStories.tsx
@@ -13,7 +13,7 @@ export const getSimpleAutoComplete = (
     ActionListItem,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         selectionType="${selectionType}"
@@ -265,7 +265,7 @@ export const tagsOutside = `
     Tag,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [selections, setSelections] = React.useState([]);
 
     return (
@@ -354,7 +354,7 @@ export const responsiveBottomSheet = `
     )
   }
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Box>
         <Text textAlign="center" marginBottom="spacing.8">Change the <Code>isMobile</Code> flag in code and refresh the sandbox preview</Text>
@@ -592,7 +592,7 @@ export const withErrorState = `
 
   const cities = ['Mumbai', 'Pune', 'Bangalore', 'Mysore'];
 
-  function App(): React.ReactElement {
+  function App() {
     const [isError, setIsError] = React.useState(false);
     const [currentInputValue, setCurrentInputValue] = React.useState('');
     const [isDismissed, setIsDismissed] = React.useState(false);
@@ -655,7 +655,7 @@ import {
   Box,
 } from '@razorpay/blade/components';
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box>
       <Heading size="medium" marginBottom="spacing.3">
diff --git a/packages/blade/src/components/Dropdown/docs/stories.ts b/packages/blade/src/components/Dropdown/docs/stories.ts
index 91be321dbe6..c914ce28159 100644
--- a/packages/blade/src/components/Dropdown/docs/stories.ts
+++ b/packages/blade/src/components/Dropdown/docs/stories.ts
@@ -23,7 +23,7 @@ const Playground = `
     Button
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         // Uncomment next line to make it multiselectable
@@ -89,7 +89,7 @@ const getSimpleSelectCode = (selectionType: DropdownProps['selectionType']): str
     ActionListItem,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Dropdown 
         selectionType="${selectionType}"
@@ -140,7 +140,7 @@ const WithHeaderFooterScroll = `
     Button
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 
     return (
@@ -248,7 +248,7 @@ const WithValueDisplayStory = `
     Box,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [currentSelections, setCurrentSelections] = React.useState([]);
     
     console.log({currentSelections});
@@ -302,7 +302,7 @@ const WithHTMLFormSubmissionStory = `
     Text,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [submissionValues, setSubmissionValues] = React.useState('');
     
     return (
@@ -362,7 +362,7 @@ const WithValidationStateStory = `
   } from '@razorpay/blade/components';
   import type { SelectInputProps } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [validationState, setValidationState] = React.useState<SelectInputProps['validationState']>('none');
 
     return (
@@ -424,7 +424,7 @@ const WithRefUsageStory = `
     Text
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const selectRef = React.useRef<HTMLElement>(null);
 
 
@@ -478,7 +478,7 @@ const WithMultipleDropdownsStory = `
   } from '@razorpay/blade/components';
 
 
-  function App(): React.ReactElement {  
+  function App() {  
     return (
       <Box display="flex" flexDirection="row" minHeight="300px" gap="spacing.2">
         <Box flex={1}>
@@ -618,7 +618,7 @@ const WithAutoPositioningSelectStory = `
     Box,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     return (
       <Box>
         <Box
@@ -816,7 +816,7 @@ const WithControlledMenuStory = `
     CloseIcon
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [status, setStatus] = React.useState<string | undefined>();
 
     return (
@@ -881,7 +881,7 @@ const WithControlledMultiSelectMenuStory = `
     Tag,
   } from '@razorpay/blade/components';
 
-  function App(): React.ReactElement {
+  function App() {
     const [filters, setFilters] = React.useState<string[]>([]);
 
     const toggleSelection = ({ name, value }: { name: string; value?: boolean }): void => {
@@ -1025,7 +1025,7 @@ import {
   Heading,
 } from '@razorpay/blade/components';
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box>
       <Heading size="medium" marginBottom="spacing.3">
diff --git a/packages/blade/src/components/FileUpload/docs/stories.tsx b/packages/blade/src/components/FileUpload/docs/stories.tsx
index f351973045b..83f84577bf0 100644
--- a/packages/blade/src/components/FileUpload/docs/stories.tsx
+++ b/packages/blade/src/components/FileUpload/docs/stories.tsx
@@ -13,7 +13,7 @@ const SingleFileUploadStory = `
   } from '@razorpay/blade/components';
   import React, { useState } from 'react';
 
-function App(): React.ReactElement {
+function App() {
     const [selectedFile, setSelectedFile] = useState<BladeFile>();
     const [isLoading, setIsLoading] = useState(false);
     const [responseData, setResponseData] = useState<{
@@ -132,7 +132,7 @@ const MultiFileUploadStory = `
   } from '@razorpay/blade/components';
   import React, { useState } from 'react';
   
-  function App(): React.ReactElement {
+  function App() {
     const [selectedFiles, setSelectedFiles] = useState<BladeFileList>([]);
     const [isLoading, setIsLoading] = useState(false);
     const [responseData, setResponseData] = useState<
@@ -295,7 +295,7 @@ import {
   } from '@razorpay/blade/components';
   import React, { useState } from 'react';
 
-  function App(): React.ReactElement {
+  function App() {
     const [productName, setProductName] = useState<string>();
     const [uploadedFiles, setUploadedFiles] = useState<BladeFileList>([]);
     const [responseData, setResponseData] = useState([]);
@@ -453,7 +453,7 @@ const AutoFileUploadWithProgressStory = `
   } from '@razorpay/blade/components';
   import React, { useState } from 'react';
   
-  function App(): React.ReactElement {
+  function App() {
     const [uploadedFiles, setUploadedFiles] = useState<BladeFileList>();
     const [productName, setProductName] = useState<string | undefined>();
     const [responseData, setResponseData] = useState([]);
@@ -650,7 +650,7 @@ import {
   } from '@razorpay/blade/components';
   import React, { useState } from 'react';
   
-  function App(): React.ReactElement {
+  function App() {
     const [productName, setProductName] = useState<string>();
     const [uploadedFiles, setUploadedFiles] = useState<BladeFileList>([]);
     const [responseData, setResponseData] = useState([]);
diff --git a/packages/blade/src/components/Icons/Icons.stories.tsx b/packages/blade/src/components/Icons/Icons.stories.tsx
index 9c4a1ef7334..20258a84916 100644
--- a/packages/blade/src/components/Icons/Icons.stories.tsx
+++ b/packages/blade/src/components/Icons/Icons.stories.tsx
@@ -24,7 +24,7 @@ const Page = (): ReactElement => {
         {`
         import { Button, ArrowRightIcon } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           // Icon component is meant to be used inside \`icon\` prop 
           // along with other components like \`Button\`, \`Badge\`, etc
           return (
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
index dbcacd505a7..f0a394fcdec 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
@@ -207,7 +207,7 @@ export default {
             {`
               import { AutoComplete, Dropdown, DropdownOverlay, ActionList, ActionListItem } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   // Only works inside Dropdown component
                   <Dropdown>
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
index b0b663c3e0c..c2a17f96c28 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx
@@ -191,7 +191,7 @@ export default {
             {`
               import { SelectInput, Dropdown, DropdownOverlay, ActionList, ActionListItem } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   // Only works inside Dropdown component
                   <Dropdown>
diff --git a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
index 5636c4669e8..1f26da05184 100644
--- a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
+++ b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
@@ -182,7 +182,7 @@ export default {
             {`
               import { OTPInput } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   // Fill OTP and check console
                   <OTPInput 
diff --git a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
index 9b2716dc082..3c90ace7f89 100644
--- a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
@@ -26,7 +26,7 @@ const Page = (): ReactElement => {
         {`
           import { PasswordInput } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <PasswordInput 
                 label="Enter Password" 
diff --git a/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx b/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
index 59e8f670e9f..19d6884e3d0 100644
--- a/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
+++ b/packages/blade/src/components/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
@@ -238,7 +238,7 @@ const meta: Meta<PhoneNumberInputProps> = {
             {`
               import { PhoneNumberInput } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <PhoneNumberInput 
                     label="Enter phone number" 
diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx
index b0c9dd1757f..31bce05f911 100644
--- a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx
+++ b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx
@@ -201,7 +201,7 @@ export default {
             {`
               import { SearchInput } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <SearchInput 
                     label="Name" 
diff --git a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
index 464ca3dd584..98024930b06 100644
--- a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
+++ b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
@@ -197,7 +197,7 @@ export default {
             {`
               import { TextArea } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <TextArea 
                     label="Description" 
diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
index ecac078b3a5..a1f64d96197 100644
--- a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
+++ b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
@@ -287,7 +287,7 @@ export default {
             {`
               import { TextInput } from '@razorpay/blade/components';
 
-              function App(): React.ReactElement {
+              function App() {
                 return (
                   <TextInput 
                     label="Name" 
diff --git a/packages/blade/src/components/Link/Link/Link.stories.tsx b/packages/blade/src/components/Link/Link/Link.stories.tsx
index 82eaedb8f19..22da47f95a9 100644
--- a/packages/blade/src/components/Link/Link/Link.stories.tsx
+++ b/packages/blade/src/components/Link/Link/Link.stories.tsx
@@ -27,7 +27,7 @@ const Page = (): ReactElement => {
         {`
           import { Link } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Link 
                 href="https://razorpay.com" 
diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx
index 9cf9a2d8db4..e7f58a902f2 100644
--- a/packages/blade/src/components/List/List.stories.tsx
+++ b/packages/blade/src/components/List/List.stories.tsx
@@ -30,7 +30,7 @@ const Page = (): ReactElement => {
         {`
           import { List, ListItem } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <List>
                 <ListItem>
diff --git a/packages/blade/src/components/Menu/docs/Menu.stories.tsx b/packages/blade/src/components/Menu/docs/Menu.stories.tsx
index bd83739f3f0..3223c502ba3 100644
--- a/packages/blade/src/components/Menu/docs/Menu.stories.tsx
+++ b/packages/blade/src/components/Menu/docs/Menu.stories.tsx
@@ -78,7 +78,7 @@ const Page = (): React.ReactElement => {
           UserIcon
         } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Box>
               <Menu>
diff --git a/packages/blade/src/components/Modal/docs/stories.ts b/packages/blade/src/components/Modal/docs/stories.ts
index 275a53abd50..97c2fdffc94 100644
--- a/packages/blade/src/components/Modal/docs/stories.ts
+++ b/packages/blade/src/components/Modal/docs/stories.ts
@@ -13,7 +13,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -64,7 +64,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -103,7 +103,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -158,7 +158,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -220,7 +220,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   return (
@@ -342,7 +342,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const buttonRef = React.useRef(null);
   const [is1stOpen, set1stIsOpen] = React.useState(false);
   const [is2ndOpen, setIs2ndOpen] = React.useState(false);
@@ -505,7 +505,7 @@ import {
 } from "@razorpay/blade/components";
 import React from "react";
 
-function App(): React.ReactElement {
+function App() {
   const [isOpen, setIsOpen] = React.useState(false);
   return (
     <>
diff --git a/packages/blade/src/components/Popover/Popover.stories.tsx b/packages/blade/src/components/Popover/Popover.stories.tsx
index 5c54b24fd37..7c2a8cb2b40 100644
--- a/packages/blade/src/components/Popover/Popover.stories.tsx
+++ b/packages/blade/src/components/Popover/Popover.stories.tsx
@@ -40,7 +40,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Popover, Button } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Popover content="Hello world" placement="bottom">
               <Button>Hover over me</Button>
diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
index 83fdd3d784c..7b5d505a5a6 100644
--- a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -22,7 +22,7 @@ const Page = (): ReactElement => {
         {`
           import { ProgressBar } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <ProgressBar 
                 label="Label" 
diff --git a/packages/blade/src/components/Radio/Radio.stories.tsx b/packages/blade/src/components/Radio/Radio.stories.tsx
index edf0e6eaa3f..4486afc13fd 100644
--- a/packages/blade/src/components/Radio/Radio.stories.tsx
+++ b/packages/blade/src/components/Radio/Radio.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): React.ReactElement => {
         {`
           import { RadioGroup, Radio } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <RadioGroup
                 helpText="Select only one"
diff --git a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
index 2c30b397c11..ac5d711c0bb 100644
--- a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
+++ b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
@@ -36,7 +36,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Skeleton } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Skeleton width="100%" height="50px" margin="spacing.4" />
           )
diff --git a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx
index b384ec7b198..29711f59efb 100644
--- a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx
+++ b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx
@@ -29,7 +29,7 @@ const Page = (): ReactElement => {
             Box 
           } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Box>
                 <Text>Click somewhere on the text here to focus on this window and press <Code>TAB</Code> key to see it in action</Text>
diff --git a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
index 45473dd8a2d..41905ef4d5b 100644
--- a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): ReactElement => {
           import { useEffect, useState } from 'react';
           import { Spinner, Text } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             const [isLoading, setIsLoading] = useState(true);
 
             useEffect(() => {
diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts b/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
index 910b5cbc435..820a2139cbd 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
+++ b/packages/blade/src/components/SpotlightPopoverTour/docs/examples.ts
@@ -76,7 +76,7 @@ export const BasicExample = `
     },
   ];
 
-  function App(): React.ReactElement {
+  function App() {
     const [activeStep, setActiveStep] = React.useState(0);
     const [isOpen, setIsOpen] = React.useState(false);
 
diff --git a/packages/blade/src/components/StepGroup/StepGroup.stories.tsx b/packages/blade/src/components/StepGroup/StepGroup.stories.tsx
index 45124b96d07..7d4d590c7fb 100644
--- a/packages/blade/src/components/StepGroup/StepGroup.stories.tsx
+++ b/packages/blade/src/components/StepGroup/StepGroup.stories.tsx
@@ -46,7 +46,7 @@ const Page = (): React.ReactElement => {
           HeartIcon,
         } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Check console
             <StepGroup orientation="vertical" size="medium">
diff --git a/packages/blade/src/components/Switch/Switch.stories.tsx b/packages/blade/src/components/Switch/Switch.stories.tsx
index c857b1a1136..f95d43034b8 100644
--- a/packages/blade/src/components/Switch/Switch.stories.tsx
+++ b/packages/blade/src/components/Switch/Switch.stories.tsx
@@ -30,7 +30,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Switch } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           return (
             // Check console
             <Switch
diff --git a/packages/blade/src/components/Table/docs/stories.ts b/packages/blade/src/components/Table/docs/stories.ts
index 91a87a2106e..c848faf152c 100644
--- a/packages/blade/src/components/Table/docs/stories.ts
+++ b/packages/blade/src/components/Table/docs/stories.ts
@@ -42,7 +42,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
@@ -139,7 +139,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
@@ -319,7 +319,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
@@ -444,7 +444,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const [selectedItem, setSelectedItem] = useState<Item | undefined>(undefined);
   return (
     <Box
@@ -575,7 +575,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const [selectedItems, setSelectedItems] = useState<Item[]>([]);
   const { platform } = useTheme();
   const onMobile = platform === 'onMobile';
@@ -721,7 +721,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const { platform } = useTheme();
   const onMobile = platform === 'onMobile';
   return (
@@ -856,7 +856,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const totalAmount = nodes.reduce((acc, curr) => acc + curr.amount, 0);
 
   return (
@@ -998,7 +998,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
@@ -1122,7 +1122,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const { platform } = useTheme();
   const onMobile = platform === 'onMobile';
 
@@ -1274,7 +1274,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const { platform } = useTheme();
   const onMobile = platform === 'onMobile';
 
@@ -1415,7 +1415,7 @@ const data: TableData<Item> = {
 
 type Emphasis = 'subtle' | 'intense' | 'moderate'
 
-function App(): React.ReactElement {
+function App() {
   const [emphasis, setEmphasis] = useState<Emphasis>('subtle');
   return (
     <Box
@@ -1538,7 +1538,7 @@ const nodes: Item[] = [
   })),
 ];
 
-function App(): React.ReactElement {
+function App() {
   const { platform } = useTheme();
   const [showData, setShowData] = useState(false);
   useEffect(() => {
@@ -1704,7 +1704,7 @@ const data: TableProps<Item>['data'] = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   const { platform } = useTheme();
   const [currentPage, setCurrentPage] = useState(0);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -1859,7 +1859,7 @@ const fetchData = async ({ page }: { page: number }): Promise<APIResult> => {
   return result as APIResult;
 };
 
-function App(): React.ReactElement {
+function App() {
   const [apiData, setApiData] = useState<{ nodes: APIResult['results'] }>({
     nodes: [],
   });
@@ -1990,7 +1990,7 @@ const data: TableData<Item> = {
   nodes,
 };
 
-function App(): React.ReactElement {
+function App() {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
diff --git a/packages/blade/src/components/Tag/Tag.stories.tsx b/packages/blade/src/components/Tag/Tag.stories.tsx
index 552ce330705..f4e27ba9810 100644
--- a/packages/blade/src/components/Tag/Tag.stories.tsx
+++ b/packages/blade/src/components/Tag/Tag.stories.tsx
@@ -27,7 +27,7 @@ const Page = (): React.ReactElement => {
         import React from 'react';
         import { Tag, FileTextIcon } from '@razorpay/blade/components';
         
-        function App(): React.ReactElement {
+        function App() {
           const [isTagVisible, setIsTagVisible] = React.useState(true);
 
           return (
diff --git a/packages/blade/src/components/Toast/Toast.stories.tsx b/packages/blade/src/components/Toast/Toast.stories.tsx
index e6165fa56b3..44f5471522c 100644
--- a/packages/blade/src/components/Toast/Toast.stories.tsx
+++ b/packages/blade/src/components/Toast/Toast.stories.tsx
@@ -27,7 +27,7 @@ const Page = (): React.ReactElement => {
         {`
         import { ToastContainer, useToast } from '@razorpay/blade/components';
 
-        function App(): React.ReactElement {
+        function App() {
           const toast = useToast();
 
           // Integrating Blade Toast in your App
diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
index a3eaf67a3de..7e1c4a6d340 100644
--- a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
@@ -31,7 +31,7 @@ const Page = (): React.ReactElement => {
         {`
         import { Tooltip, Button } from '@razorpay/blade/components'
         
-        function App(): React.ReactElement {
+        function App() {
           return (
             <Tooltip content="Hello world" placement="bottom">
               <Button>Hover over me</Button>
diff --git a/packages/blade/src/components/Typography/Code/Code.stories.tsx b/packages/blade/src/components/Typography/Code/Code.stories.tsx
index be4ef330bdf..9b684fe449a 100644
--- a/packages/blade/src/components/Typography/Code/Code.stories.tsx
+++ b/packages/blade/src/components/Typography/Code/Code.stories.tsx
@@ -21,7 +21,7 @@ const Page = (): ReactElement => {
         {`
           import { Code, Text } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               // For React Native, you will have to use flex layout to align Code component properly
               <Text>You can use <Code>Code</Code> component to add inlined Code, token names, variable names, etc</Text>
diff --git a/packages/blade/src/components/Typography/Display/Display.stories.tsx b/packages/blade/src/components/Typography/Display/Display.stories.tsx
index 1ab5396daf6..26b37656863 100644
--- a/packages/blade/src/components/Typography/Display/Display.stories.tsx
+++ b/packages/blade/src/components/Typography/Display/Display.stories.tsx
@@ -24,7 +24,7 @@ const Page = (): ReactElement => {
         {`
           import { Display } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Display size="large">Blade by Razorpay</Display>
             )
diff --git a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
index a2aec2ec5b3..652991d3e7d 100644
--- a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
+++ b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): ReactElement => {
         {`
           import { Heading } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Heading size="large">Blade by Razorpay</Heading>
             )
diff --git a/packages/blade/src/components/Typography/Text/Text.stories.tsx b/packages/blade/src/components/Typography/Text/Text.stories.tsx
index d9465e5cf1b..7d6b3d7b6a9 100644
--- a/packages/blade/src/components/Typography/Text/Text.stories.tsx
+++ b/packages/blade/src/components/Typography/Text/Text.stories.tsx
@@ -20,7 +20,7 @@ const Page = (): ReactElement => {
         {`
           import { Text } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Text>Lorem Ipsum</Text>
             )
diff --git a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
index 48ad12f5eec..d12c5470003 100644
--- a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
+++ b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx
@@ -32,7 +32,7 @@ const Page = (): ReactElement => {
         {`
           import { VisuallyHidden, Checkbox, Text, Box } from '@razorpay/blade/components';
 
-          function App(): React.ReactElement {
+          function App() {
             return (
               <Box>
                 <Text>If you focus on checkbox below with voice over enabled, you will hear "Hidden Label" announcement</Text>
diff --git a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
index d555e168fe4..05eeb60c7da 100644
--- a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
+++ b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx
@@ -6,14 +6,7 @@ import { DocsContext } from '@storybook/addon-docs';
 
 import type { Project } from '@stackblitz/sdk';
 import styled from 'styled-components';
-import {
-  getIndexTSX,
-  indexHTML,
-  logger,
-  tsConfigJSON,
-  viteConfigTS,
-  vitePackageJSON,
-} from '../baseCode';
+import { getIndexTSX, getViteReactTSDependencies, indexHTML, logger } from '../baseCode';
 import type { SandboxStackBlitzProps } from '../types';
 import BaseBox from '~components/Box/BaseBox';
 
@@ -45,7 +38,7 @@ const useStackblitzSetup = ({
     return {
       title: 'Blade Example by Razorpay',
       description: "Example of Razorpay's Design System, Blade",
-      template: 'node',
+      template: 'javascript',
       files: {
         '.vscode/settings.json': JSON.stringify(
           {
@@ -60,20 +53,18 @@ const useStackblitzSetup = ({
           4,
         ),
         'index.html': indexHTML,
-        'index.tsx': getIndexTSX({
+        'index.js': getIndexTSX({
           themeTokenName: 'bladeTheme',
           colorScheme,
           brandColor,
           showConsole,
         }),
-        'App.tsx': code ? dedent(code) : '',
-        'Logger.tsx': logger,
-        'vite.config.ts': viteConfigTS,
-        'tsconfig.json': tsConfigJSON,
-        'package.json': vitePackageJSON,
+        'App.js': code ? `import React from 'react';\n${dedent(code)}` : '',
+        'Logger.js': logger,
         '.npmrc': `auto-install-peers = false`,
         ...files,
       },
+      dependencies: getViteReactTSDependencies().dependencies,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colorScheme, brandColor]);
@@ -117,7 +108,7 @@ export const Sandbox = ({
   editorHeight = 500,
   showConsole = false,
   files,
-  openFile = 'App.tsx',
+  openFile = 'App.js',
   padding = ['spacing.5', 'spacing.0', 'spacing.8'],
   hideNavigation = true,
 }: SandboxStackBlitzProps): JSX.Element => {
diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
index 16c2fba6480..29c90465e93 100644
--- a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
+++ b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts
@@ -63,7 +63,7 @@ export const getReactScriptsJSDependencies = (): Dependencies => {
   };
 };
 
-const getViteReactTSDependencies = (): Dependencies => {
+export const getViteReactTSDependencies = (): Dependencies => {
   return {
     dependencies: {
       react: '^18',
@@ -232,6 +232,7 @@ export const getIndexTSX = ({
   colorScheme: any;
   showConsole?: boolean;
 }): string => dedent`
+import React from 'react';
 import { createRoot } from "react-dom/client";
 import { createGlobalStyle } from "styled-components";