diff --git a/ui/src/app/api-docs/api-docs.tsx b/ui/src/app/api-docs/api-docs.tsx
index c706dd268214..4c7abb460d54 100644
--- a/ui/src/app/api-docs/api-docs.tsx
+++ b/ui/src/app/api-docs/api-docs.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {uiUrl} from '../shared/base';
diff --git a/ui/src/app/app-router.tsx b/ui/src/app/app-router.tsx
index a45fd2521c82..c572297150ca 100644
--- a/ui/src/app/app-router.tsx
+++ b/ui/src/app/app-router.tsx
@@ -1,5 +1,9 @@
-import {Layout, Notifications, NotificationsManager, NotificationType, Popup, PopupManager, PopupProps} from 'argo-ui';
import * as H from 'history';
+import {Layout} from 'argo-ui/src/components/layout/layout';
+import {NotificationsManager} from 'argo-ui/src/components/notifications/notification-manager';
+import {Notifications, NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {PopupManager} from 'argo-ui/src/components/popup/popup-manager';
+import {Popup, PopupProps} from 'argo-ui/src/components/popup/popup';
import * as React from 'react';
import {useEffect, useState} from 'react';
diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
index f4099e32beff..120121ea2cbf 100644
--- a/ui/src/app/app.tsx
+++ b/ui/src/app/app.tsx
@@ -1,7 +1,11 @@
-import {NavigationManager, NotificationsManager, PopupManager} from 'argo-ui';
-
import {createBrowserHistory} from 'history';
import * as React from 'react';
+import {NavigationManager} from 'argo-ui/src/components/navigation';
+import {NotificationsManager} from 'argo-ui/src/components/notifications/notification-manager';
+import {PopupManager} from 'argo-ui/src/components/popup/popup-manager';
+
+import 'argo-ui/src/styles/main.scss';
+
import {AppRouter} from './app-router';
import {ContextApis, Provider} from './shared/context';
diff --git a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx
index d647046c806c..1675e50ace64 100644
--- a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx
+++ b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx
@@ -1,5 +1,6 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router';
diff --git a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-editor.tsx b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-editor.tsx
index ebfae00deb04..32179230605b 100644
--- a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-editor.tsx
+++ b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-editor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {WorkflowTemplate} from '../../models';
import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';
diff --git a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx
index c855a9c885d8..2e52d4591658 100644
--- a/ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx
+++ b/ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {Link, RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/cron-workflows/cron-workflow-details.tsx b/ui/src/app/cron-workflows/cron-workflow-details.tsx
index e2e97b248c4f..07017f23cc23 100644
--- a/ui/src/app/cron-workflows/cron-workflow-details.tsx
+++ b/ui/src/app/cron-workflows/cron-workflow-details.tsx
@@ -1,4 +1,6 @@
-import {NotificationType, Page, SlidingPanel} from 'argo-ui';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router';
diff --git a/ui/src/app/cron-workflows/cron-workflow-editor.tsx b/ui/src/app/cron-workflows/cron-workflow-editor.tsx
index a48bd95dff3b..8f9dca5738e5 100644
--- a/ui/src/app/cron-workflows/cron-workflow-editor.tsx
+++ b/ui/src/app/cron-workflows/cron-workflow-editor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {CronWorkflow} from '../../models';
import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';
diff --git a/ui/src/app/cron-workflows/cron-workflow-list.tsx b/ui/src/app/cron-workflows/cron-workflow-list.tsx
index 3d171ee4b585..48809f7d5871 100644
--- a/ui/src/app/cron-workflows/cron-workflow-list.tsx
+++ b/ui/src/app/cron-workflows/cron-workflow-list.tsx
@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Ticker} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Ticker} from 'argo-ui/src/components/ticker';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {Link, RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/cron-workflows/cron-workflow-spec-editior.tsx b/ui/src/app/cron-workflows/cron-workflow-spec-editior.tsx
index 9d6ce5b44302..3ebdf6dd1e66 100644
--- a/ui/src/app/cron-workflows/cron-workflow-spec-editior.tsx
+++ b/ui/src/app/cron-workflows/cron-workflow-spec-editior.tsx
@@ -1,4 +1,5 @@
-import {Checkbox, Select} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
+import {Select} from 'argo-ui/src/components/select/select';
import * as React from 'react';
import {ConcurrencyPolicy, CronWorkflowSpec} from '../../models';
diff --git a/ui/src/app/event-flow/event-flow-page.tsx b/ui/src/app/event-flow/event-flow-page.tsx
index 96de8c31079c..4e7e211b15c5 100644
--- a/ui/src/app/event-flow/event-flow-page.tsx
+++ b/ui/src/app/event-flow/event-flow-page.tsx
@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Tabs} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {useContext, useEffect, useState} from 'react';
import * as React from 'react';
import {RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/event-sources/event-source-details.tsx b/ui/src/app/event-sources/event-source-details.tsx
index 65383afcb5cf..0601dbd75421 100644
--- a/ui/src/app/event-sources/event-source-details.tsx
+++ b/ui/src/app/event-sources/event-source-details.tsx
@@ -1,5 +1,7 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel, Tabs} from 'argo-ui/src/index';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router';
diff --git a/ui/src/app/event-sources/event-source-editor.tsx b/ui/src/app/event-sources/event-source-editor.tsx
index d20fce3d156f..60bb20227a8d 100644
--- a/ui/src/app/event-sources/event-source-editor.tsx
+++ b/ui/src/app/event-sources/event-source-editor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {EventSource} from '../../models';
import {MetadataEditor} from '../shared/components/editors/metadata-editor';
diff --git a/ui/src/app/event-sources/event-source-list.tsx b/ui/src/app/event-sources/event-source-list.tsx
index b626be613e71..a2796cfb7769 100644
--- a/ui/src/app/event-sources/event-source-list.tsx
+++ b/ui/src/app/event-sources/event-source-list.tsx
@@ -1,4 +1,6 @@
-import {Page, SlidingPanel, Tabs} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import classNames from 'classnames';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
diff --git a/ui/src/app/help/help.tsx b/ui/src/app/help/help.tsx
index 77c89ceb7b9f..73e71c76b713 100644
--- a/ui/src/app/help/help.tsx
+++ b/ui/src/app/help/help.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {uiUrl} from '../shared/base';
diff --git a/ui/src/app/login/login.tsx b/ui/src/app/login/login.tsx
index a932609f6478..ec0b00d1379a 100644
--- a/ui/src/app/login/login.tsx
+++ b/ui/src/app/login/login.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {uiUrl, uiUrlWithParams} from '../shared/base';
diff --git a/ui/src/app/plugins/plugin-list.tsx b/ui/src/app/plugins/plugin-list.tsx
index 1941d1a7c5c5..46aca4b03538 100644
--- a/ui/src/app/plugins/plugin-list.tsx
+++ b/ui/src/app/plugins/plugin-list.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/reports/reports.tsx b/ui/src/app/reports/reports.tsx
index d686347a7c5e..aef2178380d6 100644
--- a/ui/src/app/reports/reports.tsx
+++ b/ui/src/app/reports/reports.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui/src/index';
+import {Page} from 'argo-ui/src/components/page/page';
import {ChartOptions} from 'chart.js';
import 'chartjs-plugin-annotation';
import * as React from 'react';
diff --git a/ui/src/app/sensors/sensor-details.tsx b/ui/src/app/sensors/sensor-details.tsx
index 52d262961a3f..bbd14aef8f65 100644
--- a/ui/src/app/sensors/sensor-details.tsx
+++ b/ui/src/app/sensors/sensor-details.tsx
@@ -1,4 +1,5 @@
-import {NotificationType, Page} from 'argo-ui';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router';
diff --git a/ui/src/app/sensors/sensor-editor.tsx b/ui/src/app/sensors/sensor-editor.tsx
index b2a676a659e0..b595af74b02d 100644
--- a/ui/src/app/sensors/sensor-editor.tsx
+++ b/ui/src/app/sensors/sensor-editor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {Sensor} from '../../models';
import {MetadataEditor} from '../shared/components/editors/metadata-editor';
diff --git a/ui/src/app/sensors/sensor-list.tsx b/ui/src/app/sensors/sensor-list.tsx
index b8240c572598..b130f82518f5 100644
--- a/ui/src/app/sensors/sensor-list.tsx
+++ b/ui/src/app/sensors/sensor-list.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import classNames from 'classnames';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
diff --git a/ui/src/app/sensors/sensor-side-panel.tsx b/ui/src/app/sensors/sensor-side-panel.tsx
index 76ce67c5aace..b7bffd024c3c 100644
--- a/ui/src/app/sensors/sensor-side-panel.tsx
+++ b/ui/src/app/sensors/sensor-side-panel.tsx
@@ -1,6 +1,8 @@
-import {SlidingPanel, Tabs} from 'argo-ui';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import * as React from 'react';
import {useState} from 'react';
+
import {Sensor} from '../../models';
import {Node} from '../shared/components/graph/types';
import {EventsPanel} from '../workflows/components/events-panel';
diff --git a/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx b/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx
index 96d450c2086e..29244c02cb27 100644
--- a/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx
+++ b/ui/src/app/shared/components/checkbox-filter/checkbox-filter.tsx
@@ -1,4 +1,4 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
import * as React from 'react';
import './checkbox-filter.scss';
diff --git a/ui/src/app/shared/components/clipboard-text.tsx b/ui/src/app/shared/components/clipboard-text.tsx
index 949a598f01e3..c8bcfa7aec04 100644
--- a/ui/src/app/shared/components/clipboard-text.tsx
+++ b/ui/src/app/shared/components/clipboard-text.tsx
@@ -1,4 +1,4 @@
-import {Tooltip} from 'argo-ui';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
import * as React from 'react';
import {useState} from 'react';
diff --git a/ui/src/app/shared/components/data-loader-dropdown.tsx b/ui/src/app/shared/components/data-loader-dropdown.tsx
index 173eb5772676..a05748a9c989 100644
--- a/ui/src/app/shared/components/data-loader-dropdown.tsx
+++ b/ui/src/app/shared/components/data-loader-dropdown.tsx
@@ -1,4 +1,5 @@
-import {DataLoader, Select, SelectOption} from 'argo-ui';
+import {DataLoader} from 'argo-ui/src/components/data-loader';
+import {Select, SelectOption} from 'argo-ui/src/components/select/select';
import * as React from 'react';
import {useState} from 'react';
diff --git a/ui/src/app/shared/components/filter-drop-down.tsx b/ui/src/app/shared/components/filter-drop-down.tsx
index 2ed833e5181e..95419e793273 100644
--- a/ui/src/app/shared/components/filter-drop-down.tsx
+++ b/ui/src/app/shared/components/filter-drop-down.tsx
@@ -1,4 +1,4 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
import classNames from 'classnames';
import * as React from 'react';
diff --git a/ui/src/app/shared/components/input-filter.tsx b/ui/src/app/shared/components/input-filter.tsx
index e870a7f97efb..14e781aa420c 100644
--- a/ui/src/app/shared/components/input-filter.tsx
+++ b/ui/src/app/shared/components/input-filter.tsx
@@ -1,4 +1,4 @@
-import {Autocomplete} from 'argo-ui';
+import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
import React, {useState} from 'react';
interface InputProps {
diff --git a/ui/src/app/shared/components/links.tsx b/ui/src/app/shared/components/links.tsx
index 52cd4677e1c2..0808d7d2d005 100644
--- a/ui/src/app/shared/components/links.tsx
+++ b/ui/src/app/shared/components/links.tsx
@@ -1,6 +1,7 @@
import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
import {useEffect, useState} from 'react';
import * as React from 'react';
+
import {Link, Workflow} from '../../../models';
import {services} from '../services';
import {Button} from './button';
diff --git a/ui/src/app/shared/components/loading.tsx b/ui/src/app/shared/components/loading.tsx
index 31f75903428f..07745c48e650 100644
--- a/ui/src/app/shared/components/loading.tsx
+++ b/ui/src/app/shared/components/loading.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {MockupList} from '../../../../node_modules/argo-ui';
+import {MockupList} from 'argo-ui/src/components/mockup-list/mockup-list';
export const Loading = () => (
diff --git a/ui/src/app/shared/components/parameters-input.tsx b/ui/src/app/shared/components/parameters-input.tsx
index 56c4eddaf612..4e76e786d9fa 100644
--- a/ui/src/app/shared/components/parameters-input.tsx
+++ b/ui/src/app/shared/components/parameters-input.tsx
@@ -1,4 +1,5 @@
-import {Select, Tooltip} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
import React from 'react';
import {Parameter} from '../../../models';
diff --git a/ui/src/app/shared/components/tags-input/tags-input.tsx b/ui/src/app/shared/components/tags-input/tags-input.tsx
index 3788e41a214d..c2ab23e52c49 100644
--- a/ui/src/app/shared/components/tags-input/tags-input.tsx
+++ b/ui/src/app/shared/components/tags-input/tags-input.tsx
@@ -1,4 +1,4 @@
-import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui';
+import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui/src/components/autocomplete/autocomplete';
import classNames from 'classnames';
import * as React from 'react';
import {useRef, useState} from 'react';
diff --git a/ui/src/app/shared/components/timestamp.tsx b/ui/src/app/shared/components/timestamp.tsx
index 7b7de13f2201..5c4fc7d11773 100644
--- a/ui/src/app/shared/components/timestamp.tsx
+++ b/ui/src/app/shared/components/timestamp.tsx
@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui';
+import {Ticker} from 'argo-ui/src/components/ticker';
import * as React from 'react';
import {ago} from '../duration';
diff --git a/ui/src/app/shared/context.ts b/ui/src/app/shared/context.ts
index b1500143548a..45835ba9e2e6 100644
--- a/ui/src/app/shared/context.ts
+++ b/ui/src/app/shared/context.ts
@@ -1,4 +1,7 @@
-import {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi} from 'argo-ui';
+import type {AppContext as ArgoAppContext} from 'argo-ui/src/context';
+import type {NavigationApi} from 'argo-ui/src/components/navigation';
+import type {NotificationsApi} from 'argo-ui/src/components/notifications/notification-manager';
+import type {PopupApi} from 'argo-ui/src/components/popup/popup-manager';
import {History} from 'history';
import * as React from 'react';
diff --git a/ui/src/app/userinfo/user-info.tsx b/ui/src/app/userinfo/user-info.tsx
index 684c045cf6c4..e908057695df 100644
--- a/ui/src/app/userinfo/user-info.tsx
+++ b/ui/src/app/userinfo/user-info.tsx
@@ -1,4 +1,4 @@
-import {Page} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
import * as React from 'react';
import {useEffect, useState} from 'react';
diff --git a/ui/src/app/workflow-event-bindings/workflow-event-bindings.tsx b/ui/src/app/workflow-event-bindings/workflow-event-bindings.tsx
index 3d3826344cc2..5603d67a3d73 100644
--- a/ui/src/app/workflow-event-bindings/workflow-event-bindings.tsx
+++ b/ui/src/app/workflow-event-bindings/workflow-event-bindings.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/workflow-templates/workflow-template-details.tsx b/ui/src/app/workflow-templates/workflow-template-details.tsx
index 60d7b4b85da9..129228ee13fe 100644
--- a/ui/src/app/workflow-templates/workflow-template-details.tsx
+++ b/ui/src/app/workflow-templates/workflow-template-details.tsx
@@ -1,5 +1,6 @@
-import {NotificationType, Page} from 'argo-ui';
-import {SlidingPanel} from 'argo-ui/src/index';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {RouteComponentProps} from 'react-router';
diff --git a/ui/src/app/workflow-templates/workflow-template-editor.tsx b/ui/src/app/workflow-templates/workflow-template-editor.tsx
index bfd24362c48f..c98e92682c7c 100644
--- a/ui/src/app/workflow-templates/workflow-template-editor.tsx
+++ b/ui/src/app/workflow-templates/workflow-template-editor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Tabs} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
import {WorkflowTemplate} from '../../models';
import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-and-annotations-editor';
diff --git a/ui/src/app/workflow-templates/workflow-template-list.tsx b/ui/src/app/workflow-templates/workflow-template-list.tsx
index b1bbb6cb042d..7f40a15db439 100644
--- a/ui/src/app/workflow-templates/workflow-template-list.tsx
+++ b/ui/src/app/workflow-templates/workflow-template-list.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {Link, RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
index 67842bde9470..a9771ffc0a4c 100644
--- a/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/resubmit-workflow-panel.tsx
@@ -1,5 +1,6 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
import React, {useContext, useState} from 'react';
+
import {Parameter, ResubmitOpts, Workflow} from '../../../models';
import {Context} from '../../shared/context';
import {uiUrl} from '../../shared/base';
diff --git a/ui/src/app/workflows/components/retry-workflow-panel.tsx b/ui/src/app/workflows/components/retry-workflow-panel.tsx
index 51ea2c518a1b..36bac85346d3 100644
--- a/ui/src/app/workflows/components/retry-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/retry-workflow-panel.tsx
@@ -1,5 +1,6 @@
-import {Checkbox} from 'argo-ui';
+import {Checkbox} from 'argo-ui/src/components/checkbox';
import React, {useContext, useState} from 'react';
+
import {Parameter, RetryOpts, Workflow} from '../../../models';
import {Context} from '../../shared/context';
import {uiUrl} from '../../shared/base';
diff --git a/ui/src/app/workflows/components/submit-workflow-panel.tsx b/ui/src/app/workflows/components/submit-workflow-panel.tsx
index c2605d99993b..87ad365f99d5 100644
--- a/ui/src/app/workflows/components/submit-workflow-panel.tsx
+++ b/ui/src/app/workflows/components/submit-workflow-panel.tsx
@@ -1,5 +1,6 @@
-import {Select} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
import React, {useContext, useMemo, useState} from 'react';
+
import {Parameter, Template} from '../../../models';
import {Context} from '../../shared/context';
import {uiUrl} from '../../shared/base';
diff --git a/ui/src/app/workflows/components/workflow-details/suspend-inputs.tsx b/ui/src/app/workflows/components/workflow-details/suspend-inputs.tsx
index 7aac1ca4792b..ec35018b15fb 100644
--- a/ui/src/app/workflows/components/workflow-details/suspend-inputs.tsx
+++ b/ui/src/app/workflows/components/workflow-details/suspend-inputs.tsx
@@ -1,4 +1,5 @@
-import {Select, Tooltip} from 'argo-ui';
+import {Select} from 'argo-ui/src/components/select/select';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
import * as React from 'react';
import {useState} from 'react';
diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
index d2699bed8da5..5349b2094c40 100644
--- a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
+++ b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import classNames from 'classnames';
import * as React from 'react';
import {useContext, useEffect, useRef, useState} from 'react';
diff --git a/ui/src/app/workflows/components/workflow-editor.tsx b/ui/src/app/workflows/components/workflow-editor.tsx
index a521ec2b3459..4c51cb64f596 100644
--- a/ui/src/app/workflows/components/workflow-editor.tsx
+++ b/ui/src/app/workflows/components/workflow-editor.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
-import {Tabs} from 'argo-ui';
import {Workflow} from '../../../models';
import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
index d0c871124182..fdac5a2d36ab 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import {useEffect, useRef, useState} from 'react';
-import {LogsViewer} from 'argo-ui';
-import {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
+import type {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
+
+import {Loading} from '../../../shared/components/loading';
import './workflow-logs-viewer.scss';
@@ -18,7 +19,22 @@ export function FullHeightLogsViewer(props: LogsViewerProps) {
return (
- {height && }
+ {height && }
);
}
+
+// lazy load LogsViewer as it imports a large component: xterm (which can be split into a separate bundle)
+const LazyLogsViewer = React.lazy(async () => {
+ // prefetch b/c logs are commonly used
+ const module = await import(/* webpackPrefetch: true, webpackChunkName: "argo-ui-logs-viewer" */ 'argo-ui/src/components/logs-viewer/logs-viewer');
+ return {default: module.LogsViewer}; // React.lazy requires a default import, so we create an intermediate module
+});
+
+function SuspenseLogsViewer(props: LogsViewerProps) {
+ return (
+
}>
+
+
+ );
+}
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
index 3194a00ae9ac..1f7c5b831cd2 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
-import {Autocomplete} from 'argo-ui';
+import {Autocomplete} from 'argo-ui/src/components/autocomplete/autocomplete';
import {Observable} from 'rxjs';
import {map, publishReplay, refCount} from 'rxjs/operators';
diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
index 19c9113a59e8..8d5c70a4ec34 100644
--- a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
+++ b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -1,4 +1,7 @@
-import {Tabs, Ticker, Tooltip} from 'argo-ui';
+import {Tabs} from 'argo-ui/src/components/tabs/tabs';
+import {Ticker} from 'argo-ui/src/components/ticker';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
+
import moment from 'moment';
import * as React from 'react';
import {useState} from 'react';
diff --git a/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx b/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
index a84df7d13766..6b7f906f4f14 100644
--- a/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
+++ b/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
@@ -1,5 +1,6 @@
import {ObjectMeta} from 'argo-ui/src/models/kubernetes';
import * as React from 'react';
+
import {WorkflowStatus} from '../../../../models';
import {Notice} from '../../../shared/components/notice';
import {Phase} from '../../../shared/components/phase';
diff --git a/ui/src/app/workflows/components/workflow-summary-panel.tsx b/ui/src/app/workflows/components/workflow-summary-panel.tsx
index b345ae27e621..36cade2327e8 100644
--- a/ui/src/app/workflows/components/workflow-summary-panel.tsx
+++ b/ui/src/app/workflows/components/workflow-summary-panel.tsx
@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui';
+import {Ticker} from 'argo-ui/src/components/ticker';
import * as React from 'react';
import {labels, NODE_PHASE, Workflow} from '../../../models';
diff --git a/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx b/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
index 844a0ddf8d48..af36228b7c75 100644
--- a/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
@@ -1,4 +1,4 @@
-import {SlideContents} from 'argo-ui';
+import {SlideContents} from 'argo-ui/src/components/slide-contents/slide-contents';
import * as React from 'react';
import * as models from '../../../../models';
diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
index f192e2827cab..d1c9b3ab6630 100644
--- a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
+++ b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -1,4 +1,5 @@
-import {Page, SlidingPanel} from 'argo-ui';
+import {Page} from 'argo-ui/src/components/page/page';
+import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
import * as React from 'react';
import {useContext, useEffect, useMemo, useState} from 'react';
import {RouteComponentProps} from 'react-router-dom';
diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
index 5f8122bf551a..b7aba72bf9cb 100644
--- a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
+++ b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
@@ -1,4 +1,4 @@
-import {Ticker} from 'argo-ui/src/index';
+import {Ticker} from 'argo-ui/src/components/ticker';
import * as React from 'react';
import {useState} from 'react';
import {Link} from 'react-router-dom';
diff --git a/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx b/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
index 41942b32fafb..1a0670970726 100644
--- a/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
+++ b/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
@@ -1,4 +1,4 @@
-import {Tooltip} from 'argo-ui';
+import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
import * as React from 'react';
import {useEffect, useState} from 'react';
diff --git a/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx b/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx
index 2f3692202672..79184c52b3a8 100644
--- a/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx
+++ b/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx
@@ -1,4 +1,4 @@
-import {NotificationType} from 'argo-ui';
+import {NotificationType} from 'argo-ui/src/components/notifications/notifications';
import * as React from 'react';
import {useContext, useMemo} from 'react';
diff --git a/ui/src/models/index.ts b/ui/src/models/index.ts
index 0241a88bc1ff..9e87060788b8 100644
--- a/ui/src/models/index.ts
+++ b/ui/src/models/index.ts
@@ -8,4 +8,4 @@ export * from './cluster-workflow-templates';
export * from './submit-opts';
export type {EventSource} from './event-source';
export type {Sensor, SensorList} from './sensor';
-export {models as kubernetes} from 'argo-ui';
+export * as kubernetes from 'argo-ui/src/models/kubernetes';