diff --git a/src/utils/base.scss b/shlink-frontend-kit/src/base.scss
similarity index 100%
rename from src/utils/base.scss
rename to shlink-frontend-kit/src/base.scss
diff --git a/shlink-frontend-kit/src/form/SearchField.scss b/shlink-frontend-kit/src/form/SearchField.scss
index 0d5fc6ff..cc49151b 100644
--- a/shlink-frontend-kit/src/form/SearchField.scss
+++ b/shlink-frontend-kit/src/form/SearchField.scss
@@ -1,4 +1,4 @@
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .search-field {
   position: relative;
diff --git a/shlink-frontend-kit/src/index.scss b/shlink-frontend-kit/src/index.scss
new file mode 100644
index 00000000..95fb926e
--- /dev/null
+++ b/shlink-frontend-kit/src/index.scss
@@ -0,0 +1,2 @@
+@import './utils/ResponsiveTable';
+@import './theme/theme';
diff --git a/shlink-frontend-kit/src/index.ts b/shlink-frontend-kit/src/index.ts
index a674d21c..735725b8 100644
--- a/shlink-frontend-kit/src/index.ts
+++ b/shlink-frontend-kit/src/index.ts
@@ -3,4 +3,5 @@ export * from './form';
 export * from './hooks';
 export * from './navigation';
 export * from './ordering';
+export * from './theme';
 export * from './utils';
diff --git a/shlink-frontend-kit/src/navigation/DropdownBtn.scss b/shlink-frontend-kit/src/navigation/DropdownBtn.scss
index aca28b54..8d3ea060 100644
--- a/shlink-frontend-kit/src/navigation/DropdownBtn.scss
+++ b/shlink-frontend-kit/src/navigation/DropdownBtn.scss
@@ -1,6 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle {
   text-align: left;
diff --git a/shlink-frontend-kit/src/navigation/NavPills.scss b/shlink-frontend-kit/src/navigation/NavPills.scss
index 0ff08c18..4151ebf1 100644
--- a/shlink-frontend-kit/src/navigation/NavPills.scss
+++ b/shlink-frontend-kit/src/navigation/NavPills.scss
@@ -1,4 +1,4 @@
-@import '../../../src/utils/base';
+@import '../base';
 
 .nav-pills__nav {
   position: sticky !important;
diff --git a/src/utils/theme/index.ts b/shlink-frontend-kit/src/theme/index.ts
similarity index 100%
rename from src/utils/theme/index.ts
rename to shlink-frontend-kit/src/theme/index.ts
diff --git a/src/utils/theme/theme.scss b/shlink-frontend-kit/src/theme/theme.scss
similarity index 100%
rename from src/utils/theme/theme.scss
rename to shlink-frontend-kit/src/theme/theme.scss
diff --git a/src/utils/table/ResponsiveTable.scss b/shlink-frontend-kit/src/utils/ResponsiveTable.scss
similarity index 97%
rename from src/utils/table/ResponsiveTable.scss
rename to shlink-frontend-kit/src/utils/ResponsiveTable.scss
index 49ac01a9..a7e90583 100644
--- a/src/utils/table/ResponsiveTable.scss
+++ b/shlink-frontend-kit/src/utils/ResponsiveTable.scss
@@ -1,4 +1,4 @@
-@import '../../utils/base';
+@import '../base';
 
 .responsive-table__header {
   @media (max-width: $responsiveTableBreakpoint) {
diff --git a/shlink-web-component/src/Main.tsx b/shlink-web-component/src/Main.tsx
index 460965d6..ab92b801 100644
--- a/shlink-web-component/src/Main.tsx
+++ b/shlink-web-component/src/Main.tsx
@@ -9,6 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
+import './utils/StickyCardPaginator.scss';
 
 export type MainProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
diff --git a/shlink-web-component/src/common/AsideMenu.scss b/shlink-web-component/src/common/AsideMenu.scss
index b27ade15..2ddd3d13 100644
--- a/shlink-web-component/src/common/AsideMenu.scss
+++ b/shlink-web-component/src/common/AsideMenu.scss
@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/vertical-align';
 
 .aside-menu {
   width: $asideMenuWidth;
diff --git a/shlink-web-component/src/domains/DomainSelector.scss b/shlink-web-component/src/domains/DomainSelector.scss
index 4bb6ce01..bdf04ef6 100644
--- a/shlink-web-component/src/domains/DomainSelector.scss
+++ b/shlink-web-component/src/domains/DomainSelector.scss
@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/vertical-align';
 
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,
diff --git a/shlink-web-component/src/overview/helpers/HighlightCard.scss b/shlink-web-component/src/overview/helpers/HighlightCard.scss
index 7a3095a7..8e23089c 100644
--- a/shlink-web-component/src/overview/helpers/HighlightCard.scss
+++ b/shlink-web-component/src/overview/helpers/HighlightCard.scss
@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .highlight-card.highlight-card {
   text-align: center;
diff --git a/shlink-web-component/src/short-urls/ShortUrlForm.scss b/shlink-web-component/src/short-urls/ShortUrlForm.scss
index c03b9328..39d137c0 100644
--- a/shlink-web-component/src/short-urls/ShortUrlForm.scss
+++ b/shlink-web-component/src/short-urls/ShortUrlForm.scss
@@ -1,4 +1,4 @@
-@import '../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .short-url-form p:last-child {
   margin-bottom: 0;
diff --git a/shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss b/shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss
index d4a00752..5ecd9c9d 100644
--- a/shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss
@@ -1,6 +1,11 @@
-@import '../../../../src/utils/base';
-@import '../../../../src/utils/mixins/text-ellipsis';
-@import '../../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../../utils/mixins/vertical-align';
+
+@mixin text-ellipsis() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 
 .short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;
diff --git a/shlink-web-component/src/tags/TagsTable.scss b/shlink-web-component/src/tags/TagsTable.scss
index c154a3fe..2a8699e4 100644
--- a/shlink-web-component/src/tags/TagsTable.scss
+++ b/shlink-web-component/src/tags/TagsTable.scss
@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/sticky-cell';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/sticky-cell';
 
 .tags-table__header-cell.tags-table__header-cell {
   @include sticky-cell(false);
diff --git a/src/utils/StickyCardPaginator.scss b/shlink-web-component/src/utils/StickyCardPaginator.scss
similarity index 100%
rename from src/utils/StickyCardPaginator.scss
rename to shlink-web-component/src/utils/StickyCardPaginator.scss
diff --git a/shlink-web-component/src/utils/components/IconInput.scss b/shlink-web-component/src/utils/components/IconInput.scss
index b698ecca..1fc0f083 100644
--- a/shlink-web-component/src/utils/components/IconInput.scss
+++ b/shlink-web-component/src/utils/components/IconInput.scss
@@ -1,5 +1,5 @@
-@import '../../../../src/utils/mixins/vertical-align';
-@import '../../../../src/utils/base';
+@import '../mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .icon-input-container {
   position: relative;
diff --git a/shlink-web-component/src/utils/dates/DateInput.scss b/shlink-web-component/src/utils/dates/DateInput.scss
index dee56199..e096e75b 100644
--- a/shlink-web-component/src/utils/dates/DateInput.scss
+++ b/shlink-web-component/src/utils/dates/DateInput.scss
@@ -1,5 +1,5 @@
-@import '../../../../src/utils/mixins/vertical-align';
-@import '../../../../src/utils/base';
+@import '../mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .react-datepicker__close-icon.react-datepicker__close-icon {
   @include vertical-align();
diff --git a/src/utils/mixins/fit-with-margin.scss b/shlink-web-component/src/utils/mixins/fit-with-margin.scss
similarity index 100%
rename from src/utils/mixins/fit-with-margin.scss
rename to shlink-web-component/src/utils/mixins/fit-with-margin.scss
diff --git a/src/utils/mixins/sticky-cell.scss b/shlink-web-component/src/utils/mixins/sticky-cell.scss
similarity index 92%
rename from src/utils/mixins/sticky-cell.scss
rename to shlink-web-component/src/utils/mixins/sticky-cell.scss
index 959d350b..3ac08092 100644
--- a/src/utils/mixins/sticky-cell.scss
+++ b/shlink-web-component/src/utils/mixins/sticky-cell.scss
@@ -1,4 +1,4 @@
-@import '../base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 @mixin sticky-cell($with-separators: true) {
   z-index: 1;
diff --git a/shlink-web-component/src/utils/mixins/vertical-align.scss b/shlink-web-component/src/utils/mixins/vertical-align.scss
new file mode 100644
index 00000000..95b5985c
--- /dev/null
+++ b/shlink-web-component/src/utils/mixins/vertical-align.scss
@@ -0,0 +1,5 @@
+@mixin vertical-align($extraTransforms: null) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) $extraTransforms;
+}
diff --git a/shlink-web-component/src/utils/settings.ts b/shlink-web-component/src/utils/settings.ts
index 20bd24f6..34d21806 100644
--- a/shlink-web-component/src/utils/settings.ts
+++ b/shlink-web-component/src/utils/settings.ts
@@ -1,5 +1,5 @@
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { createContext, useContext } from 'react';
-import type { Theme } from '../../../src/utils/theme';
 import type { ShortUrlsOrder } from '../short-urls/data';
 import type { TagsOrder } from '../tags/data/TagsListChildrenProps';
 import type { DateInterval } from './dates/helpers/dateIntervals';
diff --git a/shlink-web-component/src/visits/VisitsTable.scss b/shlink-web-component/src/visits/VisitsTable.scss
index 4916bc74..6c4f4e00 100644
--- a/shlink-web-component/src/visits/VisitsTable.scss
+++ b/shlink-web-component/src/visits/VisitsTable.scss
@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/sticky-cell';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/sticky-cell';
 
 .visits-table {
   margin: 1.5rem 0 0;
diff --git a/shlink-web-component/src/visits/charts/DoughnutChart.tsx b/shlink-web-component/src/visits/charts/DoughnutChart.tsx
index fbba2dc0..e90cee87 100644
--- a/shlink-web-component/src/visits/charts/DoughnutChart.tsx
+++ b/shlink-web-component/src/visits/charts/DoughnutChart.tsx
@@ -1,9 +1,9 @@
+import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '@shlinkio/shlink-frontend-kit';
 import type { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
 import { keys, values } from 'ramda';
 import type { FC } from 'react';
 import { memo, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '../../../../src/utils/theme';
 import { renderPieChartLabel } from '../../utils/helpers/charts';
 import type { Stats } from '../types';
 import { DoughnutChartLegend } from './DoughnutChartLegend';
diff --git a/shlink-web-component/src/visits/charts/DoughnutChartLegend.scss b/shlink-web-component/src/visits/charts/DoughnutChartLegend.scss
index af3a3cd9..0f8d4249 100644
--- a/shlink-web-component/src/visits/charts/DoughnutChartLegend.scss
+++ b/shlink-web-component/src/visits/charts/DoughnutChartLegend.scss
@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .doughnut-chart-legend {
   list-style-type: none;
diff --git a/shlink-web-component/src/visits/charts/HorizontalBarChart.tsx b/shlink-web-component/src/visits/charts/HorizontalBarChart.tsx
index 873fd0ee..600ea5ea 100644
--- a/shlink-web-component/src/visits/charts/HorizontalBarChart.tsx
+++ b/shlink-web-component/src/visits/charts/HorizontalBarChart.tsx
@@ -1,9 +1,9 @@
+import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '@shlinkio/shlink-frontend-kit';
 import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
 import { keys, values } from 'ramda';
 import type { FC, MutableRefObject } from 'react';
 import { useRef } from 'react';
 import { Bar, getElementAtEvent } from 'react-chartjs-2';
-import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../../src/utils/theme';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { prettify } from '../../utils/helpers/numbers';
 import type { Stats } from '../types';
diff --git a/shlink-web-component/src/visits/charts/LineChartCard.scss b/shlink-web-component/src/visits/charts/LineChartCard.scss
index 5f31c927..a74f33ef 100644
--- a/shlink-web-component/src/visits/charts/LineChartCard.scss
+++ b/shlink-web-component/src/visits/charts/LineChartCard.scss
@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .line-chart-card__body canvas {
   height: 300px !important;
diff --git a/shlink-web-component/src/visits/charts/LineChartCard.tsx b/shlink-web-component/src/visits/charts/LineChartCard.tsx
index 5f10969a..f2cb2a95 100644
--- a/shlink-web-component/src/visits/charts/LineChartCard.tsx
+++ b/shlink-web-component/src/visits/charts/LineChartCard.tsx
@@ -1,4 +1,4 @@
-import { ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
+import { HIGHLIGHTED_COLOR, MAIN_COLOR, ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
 import {
   add,
@@ -24,7 +24,6 @@ import {
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
-import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../../src/utils/theme';
 import { formatInternational } from '../../utils/dates/helpers/date';
 import { rangeOf } from '../../utils/helpers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
diff --git a/shlink-web-component/src/visits/helpers/MapModal.scss b/shlink-web-component/src/visits/helpers/MapModal.scss
index ef83ff13..4a88ca51 100644
--- a/shlink-web-component/src/visits/helpers/MapModal.scss
+++ b/shlink-web-component/src/visits/helpers/MapModal.scss
@@ -1,5 +1,5 @@
-@import '../../../../src/utils/base';
-@import '../../../../src/utils/mixins/fit-with-margin';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../../utils/mixins/fit-with-margin';
 
 .map-modal__modal.map-modal__modal {
   @media (min-width: $mdMin) {
diff --git a/shlink-web-component/test/tags/helpers/Tag.test.tsx b/shlink-web-component/test/tags/helpers/Tag.test.tsx
index 8d09286d..2700a51f 100644
--- a/shlink-web-component/test/tags/helpers/Tag.test.tsx
+++ b/shlink-web-component/test/tags/helpers/Tag.test.tsx
@@ -1,7 +1,7 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ReactNode } from 'react';
-import { MAIN_COLOR } from '../../../../src/utils/theme';
 import { Tag } from '../../../src/tags/helpers/Tag';
 import type { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
diff --git a/shlink-web-component/test/utils/services/ColorGenerator.test.ts b/shlink-web-component/test/utils/services/ColorGenerator.test.ts
index 43027b87..324aada5 100644
--- a/shlink-web-component/test/utils/services/ColorGenerator.test.ts
+++ b/shlink-web-component/test/utils/services/ColorGenerator.test.ts
@@ -1,5 +1,5 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MAIN_COLOR } from '../../../../src/utils/theme';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import type { LocalStorage } from '../../../src/utils/services/LocalStorage';
 
diff --git a/src/app/App.scss b/src/app/App.scss
index 538c0179..573ffcb2 100644
--- a/src/app/App.scss
+++ b/src/app/App.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .app-container {
   height: 100%;
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 64bfde0a..87cbb156 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,3 +1,4 @@
+import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
 import type { Settings } from '@shlinkio/shlink-web-component';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -7,7 +8,6 @@ import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
 import { forceUpdate } from '../utils/helpers/sw';
-import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';
 
 interface AppProps {
diff --git a/src/common/AppUpdateBanner.scss b/src/common/AppUpdateBanner.scss
index 7f6f833a..1791d80d 100644
--- a/src/common/AppUpdateBanner.scss
+++ b/src/common/AppUpdateBanner.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/horizontal-align';
 
 .app-update-banner.app-update-banner {
diff --git a/src/common/Home.scss b/src/common/Home.scss
index abdc287c..3a5a44b4 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 
 $mainCardWidth: 720px;
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 03d9ce80..dbd0aea6 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .main-header.main-header {
   color: white;
diff --git a/src/common/NoMenuLayout.scss b/src/common/NoMenuLayout.scss
index 05273173..19405b30 100644
--- a/src/common/NoMenuLayout.scss
+++ b/src/common/NoMenuLayout.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .no-menu-wrapper {
   padding: 15px 0 0;
diff --git a/src/common/ShlinkVersionsContainer.scss b/src/common/ShlinkVersionsContainer.scss
index 0ad96872..3a7e8faa 100644
--- a/src/common/ShlinkVersionsContainer.scss
+++ b/src/common/ShlinkVersionsContainer.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .shlink-versions-container--with-sidebar {
   margin-left: 0;
diff --git a/src/common/ShlinkWebComponentContainer.scss b/src/common/ShlinkWebComponentContainer.scss
index a7974a7c..52ad43f0 100644
--- a/src/common/ShlinkWebComponentContainer.scss
+++ b/src/common/ShlinkWebComponentContainer.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .menu-layout__swipeable {
   height: 100%;
diff --git a/src/common/img/ShlinkLogo.tsx b/src/common/img/ShlinkLogo.tsx
index 40094a67..dcbf8681 100644
--- a/src/common/img/ShlinkLogo.tsx
+++ b/src/common/img/ShlinkLogo.tsx
@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '../../utils/theme';
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 
 export interface ShlinkLogoProps {
   color?: string;
diff --git a/src/common/react-tag-autocomplete.scss b/src/common/react-tag-autocomplete.scss
index fdba7669..880d957b 100644
--- a/src/common/react-tag-autocomplete.scss
+++ b/src/common/react-tag-autocomplete.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .react-tags {
   position: relative;
diff --git a/src/index.scss b/src/index.scss
index 6092dc3f..ce376d04 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,12 +1,10 @@
 /* stylelint-disable no-descending-specificity */
 
-@import './utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '@shlinkio/shlink-frontend-kit/index';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
-@import './utils/theme/theme';
 @import './utils/mixins/text-ellipsis';
-@import './utils/table/ResponsiveTable';
-@import './utils/StickyCardPaginator';
 
 * {
   outline: none !important;
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index dce07857..71236d44 100644
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 @import '../utils/mixins/thin-scroll';
 
diff --git a/src/servers/helpers/ServerError.scss b/src/servers/helpers/ServerError.scss
index 5d093b62..89fef361 100644
--- a/src/servers/helpers/ServerError.scss
+++ b/src/servers/helpers/ServerError.scss
@@ -1,4 +1,4 @@
-@import '../../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .server-error__container {
   text-align: center;
diff --git a/src/settings/UserInterfaceSettings.tsx b/src/settings/UserInterfaceSettings.tsx
index 6fc41ff1..e34ad0f1 100644
--- a/src/settings/UserInterfaceSettings.tsx
+++ b/src/settings/UserInterfaceSettings.tsx
@@ -1,10 +1,9 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
+import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import type { Theme } from '../utils/theme';
-import { changeThemeInMarkup } from '../utils/theme';
 import './UserInterfaceSettings.scss';
 
 interface UserInterfaceProps {
diff --git a/test/common/img/ShlinkLogo.test.tsx b/test/common/img/ShlinkLogo.test.tsx
index 6fcc6459..d6ce4597 100644
--- a/test/common/img/ShlinkLogo.test.tsx
+++ b/test/common/img/ShlinkLogo.test.tsx
@@ -1,7 +1,7 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { render } from '@testing-library/react';
 import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
 import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo';
-import { MAIN_COLOR } from '../../../src/utils/theme';
 
 describe('<ShlinkLogo />', () => {
   const setUp = (props: ShlinkLogoProps) => render(<ShlinkLogo {...props} />);
diff --git a/test/settings/UserInterfaceSettings.test.tsx b/test/settings/UserInterfaceSettings.test.tsx
index 53c43809..3a99a05f 100644
--- a/test/settings/UserInterfaceSettings.test.tsx
+++ b/test/settings/UserInterfaceSettings.test.tsx
@@ -1,8 +1,8 @@
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import type { UiSettings } from '@shlinkio/shlink-web-component';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
-import type { Theme } from '../../src/utils/theme';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<UserInterfaceSettings />', () => {