diff --git a/resources/js/Components/Common/Reporting/ReportingChart.vue b/resources/js/Components/Common/Reporting/ReportingChart.vue
index 4a735324..8db1567d 100644
--- a/resources/js/Components/Common/Reporting/ReportingChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingChart.vue
@@ -13,7 +13,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 
 use([CanvasRenderer, BarChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);
 
diff --git a/resources/js/Components/Common/Reporting/ReportingPieChart.vue b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
index b64a14c3..8cb78028 100644
--- a/resources/js/Components/Common/Reporting/ReportingPieChart.vue
+++ b/resources/js/Components/Common/Reporting/ReportingPieChart.vue
@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 import type { Organization } from '@/packages/api/src';
 
 use([CanvasRenderer, PieChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);
diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue
index def34cad..cc2bc26b 100644
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -20,7 +20,7 @@ import {
     getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
 import chroma from 'chroma-js';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api, type Organization } from '@/packages/api/src';
diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
index ee868577..28c77502 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
 import { computed } from 'vue';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 
 const props = defineProps<{
     history: number[];
diff --git a/resources/js/Components/Dashboard/ProjectsChartCard.vue b/resources/js/Components/Dashboard/ProjectsChartCard.vue
index 950e377b..3cca3878 100644
--- a/resources/js/Components/Dashboard/ProjectsChartCard.vue
+++ b/resources/js/Components/Dashboard/ProjectsChartCard.vue
@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 import type { Organization } from '@/packages/api/src';
 
 use([CanvasRenderer, PieChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);
diff --git a/resources/js/Components/Dashboard/ThisWeekOverview.vue b/resources/js/Components/Dashboard/ThisWeekOverview.vue
index f886fa94..9cf9f615 100644
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -19,7 +19,7 @@ import ThisWeekReportingTable from '@/Components/Dashboard/ThisWeekReportingTabl
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '@/packages/ui/src';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
diff --git a/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue b/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
index 120d585f..1d3113d7 100644
--- a/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
+++ b/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
@@ -11,7 +11,7 @@ import {
     onUnmounted,
 } from 'vue';
 import { useLocalStorage } from '@vueuse/core';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVariable } from '../utils/useCssVariable';
 import { getLocalizedDayJs } from '../utils/time';
 import { LoadingSpinner, TimeEntryCreateModal, TimeEntryEditModal } from '..';
 import FullCalendarDayHeader from './FullCalendarDayHeader.vue';
diff --git a/resources/js/packages/ui/src/index.ts b/resources/js/packages/ui/src/index.ts
index aa538d89..af55699e 100644
--- a/resources/js/packages/ui/src/index.ts
+++ b/resources/js/packages/ui/src/index.ts
@@ -20,6 +20,7 @@ export type { FieldVariants } from './field/index';
 export type { CalendarSettings } from './FullCalendar/calendarSettings';
 export type { ActivityPeriod } from './FullCalendar/activityTypes';
 export { cn } from './utils/cn';
+export { useCssVariable } from './utils/useCssVariable';
 
 import Badge from './Badge.vue';
 import Button from './Buttons/Button.vue';
diff --git a/resources/js/utils/useCssVariable.ts b/resources/js/packages/ui/src/utils/useCssVariable.ts
similarity index 100%
rename from resources/js/utils/useCssVariable.ts
rename to resources/js/packages/ui/src/utils/useCssVariable.ts