try using fns instead;

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -34,10 +34,10 @@ interface Props extends PropsWithChildren {
   openAPISchemaUrl?: string;
   token?: string;
   config?: PartialAppConfig;
-  customNavComponent?: ReactNode;
+  customNavComponent?: () => JSX.Element;
   middleware?: Middleware[];
   projectId?: string;
-  galleryHeader?: ReactNode;
+  galleryHeader?: () => JSX.Element;
   queueId?: string;
   selectedImage?: {
     imageName: string;
@@ -46,7 +46,7 @@ interface Props extends PropsWithChildren {
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
-  logo?: ReactNode;
+  logo?: () => JSX.Element;
   workflowCategories?: WorkflowCategory[];
 }
 

invokeai/frontend/web/src/app/store/nanostores/customNavComponent.ts

@@ -1,4 +1,3 @@
 import { atom } from 'nanostores';
-import type { ReactNode } from 'react';
 
-export const $customNavComponent = atom<ReactNode | undefined>(undefined);
+export const $customNavComponent = atom<undefined | (() => JSX.Element)>(undefined);

invokeai/frontend/web/src/app/store/nanostores/galleryHeader.ts

@@ -1,4 +1,3 @@
 import { atom } from 'nanostores';
-import type { ReactNode } from 'react';
 
-export const $galleryHeader = atom<ReactNode | undefined>(undefined);
+export const $galleryHeader = atom<undefined | (() => JSX.Element)>(undefined);

invokeai/frontend/web/src/app/store/nanostores/logo.ts

@@ -1,4 +1,3 @@
 import { atom } from 'nanostores';
-import type { ReactNode } from 'react';
 
-export const $logo = atom<ReactNode | undefined>(undefined);
+export const $logo = atom<undefined | (() => JSX.Element)>(undefined);

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -1,4 +1,14 @@
-import { Box, Button, ButtonGroup, Flex, Tab, TabList, Tabs, useDisclosure, VStack } from '@invoke-ai/ui-library';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Tab,
+  TabList,
+  Tabs,
+  useDisclosure,
+  VStack,
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -20,7 +30,8 @@ const ImageGalleryContent = () => {
   const galleryView = useAppSelector((s) => s.gallery.galleryView);
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
-  const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = useDisclosure({ defaultIsOpen: true });
+  const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } =
+    useDisclosure({ defaultIsOpen: true });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -31,11 +42,26 @@ const ImageGalleryContent = () => {
   }, [dispatch]);
 
   return (
-    <VStack layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2}>
-      {galleryHeader}
+    <VStack
+      layerStyle="first"
+      flexDirection="column"
+      h="full"
+      w="full"
+      borderRadius="base"
+      p={2}
+    >
+      {galleryHeader && galleryHeader()}
       <Box w="full">
-        <Flex ref={resizeObserverRef} alignItems="center" justifyContent="space-between" gap={2}>
-          <GalleryBoardName isOpen={isBoardListOpen} onToggle={onToggleBoardList} />
+        <Flex
+          ref={resizeObserverRef}
+          alignItems="center"
+          justifyContent="space-between"
+          gap={2}
+        >
+          <GalleryBoardName
+            isOpen={isBoardListOpen}
+            onToggle={onToggleBoardList}
+          />
           <GallerySettingsPopover />
         </Flex>
         <Box>
@@ -44,7 +70,12 @@ const ImageGalleryContent = () => {
       </Box>
       <Flex ref={galleryGridRef} direction="column" gap={2} h="full" w="full">
         <Flex alignItems="center" justifyContent="space-between" gap={2}>
-          <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
+          <Tabs
+            index={galleryView === 'images' ? 0 : 1}
+            variant="unstyled"
+            size="sm"
+            w="full"
+          >
             <TabList>
               <ButtonGroup w="full">
                 <Tab

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -18,7 +18,7 @@ const InvokeAILogoComponent = () => {
   }, [appVersion]);
 
   if (logoOverride) {
-    return logoOverride;
+    return logoOverride();
   }
 
   return (

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -1,4 +1,14 @@
-import { Flex, IconButton, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs, Tooltip } from '@invoke-ai/ui-library';
+import {
+  Flex,
+  IconButton,
+  Spacer,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Tooltip,
+} from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
@@ -15,14 +25,23 @@ import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
 import { usePanel } from 'features/ui/hooks/usePanel';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
-import { activeTabIndexSelector, activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import {
+  activeTabIndexSelector,
+  activeTabNameSelector,
+} from 'features/ui/store/uiSelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiFlowArrowBold } from 'react-icons/pi';
-import { RiBox2Line, RiBrushLine, RiImage2Line, RiInputMethodLine, RiPlayList2Fill } from 'react-icons/ri';
+import {
+  RiBox2Line,
+  RiBrushLine,
+  RiImage2Line,
+  RiInputMethodLine,
+  RiPlayList2Fill,
+} from 'react-icons/ri';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
@@ -81,8 +100,9 @@ const tabs: InvokeTabInfo[] = [
   },
 ];
 
-const enabledTabsSelector = createMemoizedSelector(selectConfigSlice, (config) =>
-  tabs.filter((tab) => !config.disabledTabs.includes(tab.id))
+const enabledTabsSelector = createMemoizedSelector(
+  selectConfigSlice,
+  (config) => tabs.filter((tab) => !config.disabledTabs.includes(tab.id))
 );
 
 export const NO_GALLERY_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue'];
@@ -108,8 +128,14 @@ const InvokeTabs = () => {
       e.target.blur();
     }
   }, []);
-  const shouldShowOptionsPanel = useMemo(() => !NO_OPTIONS_PANEL_TABS.includes(activeTabName), [activeTabName]);
-  const shouldShowGalleryPanel = useMemo(() => !NO_GALLERY_PANEL_TABS.includes(activeTabName), [activeTabName]);
+  const shouldShowOptionsPanel = useMemo(
+    () => !NO_OPTIONS_PANEL_TABS.includes(activeTabName),
+    [activeTabName]
+  );
+  const shouldShowGalleryPanel = useMemo(
+    () => !NO_GALLERY_PANEL_TABS.includes(activeTabName),
+    [activeTabName]
+  );
 
   const tabs = useMemo(
     () =>
@@ -133,7 +159,8 @@ const InvokeTabs = () => {
   );
 
   const tabPanels = useMemo(
-    () => enabledTabs.map((tab) => <TabPanel key={tab.id}>{tab.content}</TabPanel>),
+    () =>
+      enabledTabs.map((tab) => <TabPanel key={tab.id}>{tab.content}</TabPanel>),
     [enabledTabs]
   );
 
@@ -227,7 +254,7 @@ const InvokeTabs = () => {
         </TabList>
         <Spacer />
         <StatusIndicator />
-        {customNavComponent ? customNavComponent : <SettingsMenu />}
+        {customNavComponent ? customNavComponent() : <SettingsMenu />}
       </Flex>
       <PanelGroup
         ref={panelGroupRef}
@@ -249,7 +276,11 @@ const InvokeTabs = () => {
               onExpand={optionsPanel.onExpand}
               collapsible
             >
-              {activeTabName === 'nodes' ? <NodeEditorPanelGroup /> : <ParametersPanel />}
+              {activeTabName === 'nodes' ? (
+                <NodeEditorPanelGroup />
+              ) : (
+                <ParametersPanel />
+              )}
             </Panel>
             <ResizeHandle
               id="options-main-handle"
@@ -285,8 +316,12 @@ const InvokeTabs = () => {
           </>
         )}
       </PanelGroup>
-      {shouldShowOptionsPanel && <FloatingParametersPanelButtons panelApi={optionsPanel} />}
-      {shouldShowGalleryPanel && <FloatingGalleryButton panelApi={galleryPanel} />}
+      {shouldShowOptionsPanel && (
+        <FloatingParametersPanelButtons panelApi={optionsPanel} />
+      )}
+      {shouldShowGalleryPanel && (
+        <FloatingGalleryButton panelApi={galleryPanel} />
+      )}
     </Tabs>
   );
 };