diff --git a/apps/desktop/src/lib/components/DecorativeSplitView.svelte b/apps/desktop/src/lib/components/DecorativeSplitView.svelte
index 0b2060465..614d3d38f 100644
--- a/apps/desktop/src/lib/components/DecorativeSplitView.svelte
+++ b/apps/desktop/src/lib/components/DecorativeSplitView.svelte
@@ -220,13 +220,7 @@
 		width: 100%;
 		height: 2px;
 		border: none;
-		background: repeating-linear-gradient(
-			to right,
-			var(--fill-color),
-			var(--fill-color) 1px,
-			transparent 1px,
-			transparent 4px
-		);
+		background-image: linear-gradient(to right, var(--fill-color) 50%, transparent 50%);
 		background-size: 4px 4px;
 		opacity: 0.5;
 	}
diff --git a/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte b/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
index 8f344f09e..10b178e6a 100644
--- a/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
+++ b/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
@@ -7,11 +7,11 @@
 	import derectionDoubtSvg from '$lib/assets/illustrations/direction-doubt.svg?raw';
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import type { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import { goto } from '$app/navigation';
 
diff --git a/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte b/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte
index c43582e74..3f90ba7fd 100644
--- a/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte
+++ b/apps/desktop/src/lib/components/ProblemLoadingRepo.svelte
@@ -6,10 +6,10 @@
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
 	import ProjectNameLabel from '$lib/shared/ProjectNameLabel.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext } from '@gitbutler/shared/context';
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { goto } from '$app/navigation';
 
 	export let error: any = undefined;
diff --git a/apps/desktop/src/lib/components/ProjectNotFound.svelte b/apps/desktop/src/lib/components/ProjectNotFound.svelte
index a44ea25f8..76ae25ce9 100644
--- a/apps/desktop/src/lib/components/ProjectNotFound.svelte
+++ b/apps/desktop/src/lib/components/ProjectNotFound.svelte
@@ -5,9 +5,9 @@
 	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
 	import { ProjectsService } from '$lib/backend/projects';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 
 	const projectsService = getContext(ProjectsService);
 	const id = projectsService.getLastOpenedProject();
diff --git a/apps/desktop/src/lib/onboarding/CloneForm.svelte b/apps/desktop/src/lib/onboarding/CloneForm.svelte
index 3ac725473..377fff909 100644
--- a/apps/desktop/src/lib/onboarding/CloneForm.svelte
+++ b/apps/desktop/src/lib/onboarding/CloneForm.svelte
@@ -3,11 +3,11 @@
 	import { ProjectsService } from '$lib/backend/projects';
 	import Section from '$lib/settings/Section.svelte';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
 	import { getContext } from '@gitbutler/shared/context';
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import * as Sentry from '@sentry/sveltekit';
 	import { open } from '@tauri-apps/api/dialog';
diff --git a/apps/desktop/src/lib/settings/Section.svelte b/apps/desktop/src/lib/settings/Section.svelte
index 97898cedb..e93305c24 100644
--- a/apps/desktop/src/lib/settings/Section.svelte
+++ b/apps/desktop/src/lib/settings/Section.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Spacer from '$lib/shared/Spacer.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	export let spacer = false;
diff --git a/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte b/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte
index 0c363084a..9894ccb82 100644
--- a/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte
+++ b/apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte
@@ -5,10 +5,10 @@
 	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import Section from '$lib/settings/Section.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
 	import { goto } from '$app/navigation';
 
diff --git a/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte b/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte
index 35d27a362..e45e1c9fc 100644
--- a/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte
+++ b/apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte
@@ -3,10 +3,10 @@
 	import SectionCard from '$lib/components/SectionCard.svelte';
 	import Section from '$lib/settings/Section.svelte';
 	import Link from '$lib/shared/Link.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { User } from '$lib/stores/user';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext, getContextStore } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
diff --git a/apps/desktop/src/lib/settings/userPreferences/GitForm.svelte b/apps/desktop/src/lib/settings/userPreferences/GitForm.svelte
index 1c0b52a9c..3ab16e0c0 100644
--- a/apps/desktop/src/lib/settings/userPreferences/GitForm.svelte
+++ b/apps/desktop/src/lib/settings/userPreferences/GitForm.svelte
@@ -5,8 +5,8 @@
 	import { Project, ProjectsService } from '$lib/backend/projects';
 	import SectionCard from '$lib/components/SectionCard.svelte';
 	import { platformName } from '$lib/platform/platform';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
 
 	const project = getContext(Project);
diff --git a/apps/desktop/src/lib/stack/Stack.svelte b/apps/desktop/src/lib/stack/Stack.svelte
index ed8e4de51..bb346c7c0 100644
--- a/apps/desktop/src/lib/stack/Stack.svelte
+++ b/apps/desktop/src/lib/stack/Stack.svelte
@@ -12,7 +12,6 @@
 	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import Resizer from '$lib/shared/Resizer.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { intersectionObserver } from '$lib/utils/intersectionObserver';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { FileIdSelection } from '$lib/vbranches/fileIdSelection';
@@ -21,6 +20,7 @@
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import lscache from 'lscache';
 	import { onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';
diff --git a/apps/desktop/src/routes/settings/ai/+page.svelte b/apps/desktop/src/routes/settings/ai/+page.svelte
index 17a26381f..7033046f2 100644
--- a/apps/desktop/src/routes/settings/ai/+page.svelte
+++ b/apps/desktop/src/routes/settings/ai/+page.svelte
@@ -12,9 +12,9 @@
 	import Section from '$lib/settings/Section.svelte';
 	import InfoMessage from '$lib/shared/InfoMessage.svelte';
 	import RadioButton from '$lib/shared/RadioButton.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import { onMount, tick } from 'svelte';
 
diff --git a/apps/desktop/src/routes/settings/integrations/+page.svelte b/apps/desktop/src/routes/settings/integrations/+page.svelte
index c4a7c5c5f..ce115c3c0 100644
--- a/apps/desktop/src/routes/settings/integrations/+page.svelte
+++ b/apps/desktop/src/routes/settings/integrations/+page.svelte
@@ -2,9 +2,9 @@
 	import SettingsPage from '$lib/layout/SettingsPage.svelte';
 	import AuthorizationBanner from '$lib/settings/AuthorizationBanner.svelte';
 	import GithubIntegration from '$lib/settings/GithubIntegration.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 
 	const userService = getContext(UserService);
 	const user = userService.user;
diff --git a/apps/desktop/src/routes/settings/profile/+page.svelte b/apps/desktop/src/routes/settings/profile/+page.svelte
index 46978bc3d..a713658c7 100644
--- a/apps/desktop/src/routes/settings/profile/+page.svelte
+++ b/apps/desktop/src/routes/settings/profile/+page.svelte
@@ -5,12 +5,12 @@
 	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import SettingsPage from '$lib/layout/SettingsPage.svelte';
 	import { showError } from '$lib/notifications/toasts';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import { goto } from '$app/navigation';
 
diff --git a/apps/desktop/src/lib/shared/Spacer.svelte b/packages/ui/src/lib/Spacer.svelte
similarity index 64%
rename from apps/desktop/src/lib/shared/Spacer.svelte
rename to packages/ui/src/lib/Spacer.svelte
index 56bbcbe53..204430290 100644
--- a/apps/desktop/src/lib/shared/Spacer.svelte
+++ b/packages/ui/src/lib/Spacer.svelte
@@ -1,13 +1,15 @@
-<script lang="ts">
-	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
-
-	interface SpacerProps {
+<script lang="ts" module>
+	export interface Props {
 		margin?: number;
 		noLine?: boolean;
 		dotted?: boolean;
 	}
+</script>
 
-	const { margin = 12, noLine = false, dotted = false }: SpacerProps = $props();
+<script lang="ts">
+	import { pxToRem } from '$lib/utils/pxToRem';
+
+	const { margin = 12, noLine = false, dotted = false }: Props = $props();
 
 	function getMargins() {
 		if (margin === undefined) {
@@ -38,12 +40,7 @@
 
 	.divider.dotted {
 		opacity: 0.2;
-		background: repeating-linear-gradient(
-			90deg,
-			transparent,
-			transparent 2px,
-			var(--clr-scale-ntrl-0) 2px,
-			var(--clr-scale-ntrl-0) 4px
-		);
+		background-image: linear-gradient(to right, var(--clr-scale-ntrl-0) 50%, transparent 50%);
+		background-size: 4px 1px;
 	}
 </style>
diff --git a/packages/ui/src/stories/spacer/Spacer.stories.ts b/packages/ui/src/stories/spacer/Spacer.stories.ts
new file mode 100644
index 000000000..68c4bbef8
--- /dev/null
+++ b/packages/ui/src/stories/spacer/Spacer.stories.ts
@@ -0,0 +1,19 @@
+import SpacerDemo from './SpacerDemo.svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Elements / Spacer',
+	component: SpacerDemo
+} satisfies Meta<SpacerDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SpacerStory: Story = {
+	name: 'Spacer',
+	args: {
+		margin: 12,
+		noLine: false,
+		dotted: false
+	}
+};
diff --git a/packages/ui/src/stories/spacer/SpacerDemo.svelte b/packages/ui/src/stories/spacer/SpacerDemo.svelte
new file mode 100644
index 000000000..8db99fd44
--- /dev/null
+++ b/packages/ui/src/stories/spacer/SpacerDemo.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Spacer, { type Props } from '$lib/Spacer.svelte';
+
+	const props: Props = $props();
+</script>
+
+<Spacer {...props} />
diff --git a/packages/ui/src/styles/components/commit-lines.css b/packages/ui/src/styles/components/commit-lines.css
index 8c828dc12..e71346dc9 100644
--- a/packages/ui/src/styles/components/commit-lines.css
+++ b/packages/ui/src/styles/components/commit-lines.css
@@ -60,13 +60,8 @@
 
 		&:before {
 			height: calc(100% + 1px);
-			background: repeating-linear-gradient(
-				0,
-				transparent,
-				transparent 2px,
-				var(--border-color) 2px,
-				var(--border-color) 4px
-			);
+			background: linear-gradient(to bottom, var(--border-color) 50%, transparent 50%);
+			background-size: 4px 4px;
 		}
 	}
 }