diff --git a/client/admin/main.jsx b/client/admin/main.jsx
index 3726391ec..ce031c6c8 100644
--- a/client/admin/main.jsx
+++ b/client/admin/main.jsx
@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import Admin from './admin.jsx';
-import { bootstrapAnchorPositioningPolyfill } from '../components/anchorPositioningPolyfill.js';
+import { bootstrapAnchorPositioningPolyfill } from '@components/anchorPositioningPolyfill.js';
 
 const props = window.__INITIAL_PROPS__ || {};
 
diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 24cf9306f..976f8c9c1 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -11,7 +11,7 @@ import ErrorBar from './errorBar/errorBar.jsx';
 import ToolBar  from './toolBar/toolBar.jsx';
 
 //TODO: move to the brew renderer
-import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
+import RenderWarnings from '@components/renderWarnings/renderWarnings.jsx';
 import NotificationPopup from './notificationPopup/notificationPopup.jsx';
 import Frame from 'react-frame-component';
 import dedent from 'dedent';
diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.jsx b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
index b4522d759..92d8081e1 100644
--- a/client/homebrew/brewRenderer/errorBar/errorBar.jsx
+++ b/client/homebrew/brewRenderer/errorBar/errorBar.jsx
@@ -1,7 +1,7 @@
 import './errorBar.less';
 import React from 'react';
 
-import Dialog from '../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
index 5f4fc5608..9ef30917d 100644
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
 import Markdown from '@shared/markdown.js';
 
-import Dialog from '../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 97d996633..16c89ea59 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,7 +3,7 @@ import './toolBar.less';
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+import { Anchored, AnchoredBox, AnchoredTrigger } from '@components/Anchored.jsx';
 
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 017cb7933..f500bebeb 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -5,7 +5,7 @@ import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import dedent from 'dedent';
 
-import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
+import CodeEditor from '@components/codeEditor/codeEditor.jsx';
 import SnippetBar from './snippetbar/snippetbar.jsx';
 import MetadataEditor from './metadataEditor/metadataEditor.jsx';
 
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 8d6ccb890..2ce76188c 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import request from '../../utils/request-middleware.js';
-import Combobox from '../../../components/combobox.jsx';
+import Combobox from '@components/combobox.jsx';
 import TagInput from '../tagInput/tagInput.jsx';
 
 
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index b4e7b311b..dc921ffbb 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -2,7 +2,7 @@
 import './snippetbar.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
-import { Dropdown } from '../../../components/dropdown/dropdown.jsx';
+import { Dropdown } from '@components/dropdown/dropdown.jsx';
 
 import _ from 'lodash';
 import cx from 'classnames';
diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index b43797424..aee33e8f6 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -1,6 +1,6 @@
 import './tagInput.less';
 import React, { useState, useEffect } from 'react';
-import Combobox from '../../../components/combobox.jsx';
+import Combobox from '@components/combobox.jsx';
 
 import { tagSuggestionList, canonizationList } from './curatedTagSuggestionList.js';
 
diff --git a/client/homebrew/main.jsx b/client/homebrew/main.jsx
index 83db1c634..b580df54d 100644
--- a/client/homebrew/main.jsx
+++ b/client/homebrew/main.jsx
@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import Homebrew from './homebrew.jsx';
-import { bootstrapAnchorPositioningPolyfill } from '../components/anchorPositioningPolyfill.js';
+import { bootstrapAnchorPositioningPolyfill } from '@components/anchorPositioningPolyfill.js';
 
 const props = window.__INITIAL_PROPS__ || {};
 
diff --git a/client/homebrew/navbar/nav.jsx b/client/homebrew/navbar/nav.jsx
index 9e065e0ee..7af6bcb79 100644
--- a/client/homebrew/navbar/nav.jsx
+++ b/client/homebrew/navbar/nav.jsx
@@ -4,7 +4,7 @@ import createReactClass from 'create-react-class';
 import _ from 'lodash';
 import cx from 'classnames';
 
-import NaturalCritIcon from '../../components/svg/naturalcrit-d20.svg.jsx';
+import NaturalCritIcon from '@components/svg/naturalcrit-d20.svg.jsx';
 
 const Nav = {
 	base : createReactClass({
diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx
index ef1262034..8a443545c 100644
--- a/client/homebrew/pages/accountPage/accountPage.jsx
+++ b/client/homebrew/pages/accountPage/accountPage.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import UIPage from '../basePages/uiPage/uiPage.jsx';
-import NaturalCritIcon from '../../../components/svg/naturalcrit-d20.svg.jsx';
+import NaturalCritIcon from '@components/svg/naturalcrit-d20.svg.jsx';
 
 let SAVEKEY = '';
 
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index a7c6e4595..bc18bc5e5 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
index c71c85891..326e13030 100644
--- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
+++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
@@ -1,7 +1,7 @@
 import './lockNotification.less';
 import * as React from 'react';
 import request from '../../../utils/request-middleware.js';
-import Dialog from '../../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
 
 function LockNotification(props) {
 	props = {
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index 580d69e76..bb59c0665 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index 270ca89a0..2da3c8394 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -10,7 +10,7 @@ import _                                      from 'lodash';
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '@shared/helpers.js';
 
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx
index e6a9768bb..682630b6f 100644
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -11,7 +11,7 @@ import Account      from '@navbar/account.navitem.jsx';
 import NewBrew      from '@navbar/newbrew.navitem.jsx';
 import HelpNavItem  from '@navbar/help.navitem.jsx';
 import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
-import SplitPane    from '../../../components/splitPane/splitPane.jsx';
+import SplitPane    from '@components/splitPane/splitPane.jsx';
 import ErrorIndex   from '../errorPage/errors/errorIndex.js';
 
 import request from '../../utils/request-middleware.js';
diff --git a/vite.config.js b/vite.config.js
index d9eacd502..4ec249a88 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,6 +13,7 @@ export default defineConfig({
 			'@sharedStyles' : path.resolve(__dirname, './shared/naturalcrit/styles'),
 			'@navbar'       : path.resolve(__dirname, './client/homebrew/navbar'),
 			'@themes'       : path.resolve(__dirname, './themes'),
+			'@components'   : path.resolve(__dirname, './client/components')
 		},
 	},
 	build : {