diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index a0554fdb5..065ae4f38 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -1,3 +1,33 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const fileRow = tv({
+		slots: {
+			root: "grid items-center gap-4 py-1",
+			link: "flex min-w-0 items-center gap-2 text-foreground-default no-underline hover:underline",
+			message: "hidden min-w-0 md:col-span-6 md:block",
+			time: "text-right text-foreground-subtle"
+		},
+		variants: {
+			withMessage: {
+				true: {
+					root: "grid-cols-12",
+					link: "col-span-8 md:col-span-4",
+					time: "col-span-4 md:col-span-2"
+				},
+				false: {
+					root: "grid-cols-3",
+					link: "col-span-2",
+					time: "col-span-1"
+				}
+			}
+		},
+		defaultVariants: {
+			withMessage: false
+		}
+	});
+</script>
+
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import File from "$icon/file";
@@ -23,6 +53,7 @@
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 	const encodedRef = $derived(encodeURIComponent(ref));
+	const row = $derived(fileRow({ withMessage }));
 
 	const linkFor = (entry: TreeEntrySummary) => {
 		const target = path ? `${path}/${entry.name}` : entry.name;
@@ -54,16 +85,8 @@
 	{#each entries as entry (entry.name)}
 		{@const Glyph = iconFor(entry)}
 		{@const href = resolve(linkFor(entry) as "/")}
-		<div
-			class={`grid items-center gap-4 py-1 ${withMessage ? "grid-cols-12" : "grid-cols-3"}`}
-			class:row-breathe={navigatingTo(href)}
-		>
-			<a
-				{href}
-				class={`flex min-w-0 items-center gap-2 text-foreground-default no-underline hover:underline ${
-					withMessage ? "col-span-8 md:col-span-4" : "col-span-2"
-				}`}
-			>
+		<div class={row.root()} class:row-breathe={navigatingTo(href)}>
+			<a {href} class={row.link()}>
 				<span class="text-foreground-muted">
 					<Glyph class={iconClassFor(entry)} aria-hidden="true" />
 				</span>
@@ -71,7 +94,7 @@
 			</a>
 
 			{#if withMessage}
-				<div class="hidden min-w-0 md:col-span-6 md:block">
+				<div class={row.message()}>
 					{#if entry.lastCommitHash && entry.lastCommitMessage}
 						<a
 							href={resolve(`${base}/commit/${entry.lastCommitHash}` as "/")}
@@ -83,11 +106,7 @@
 				</div>
 			{/if}
 
-			<div
-				class={`text-right text-foreground-subtle ${
-					withMessage ? "col-span-4 md:col-span-2" : "col-span-1"
-				}`}
-			>
+			<div class={row.time()}>
 				{#if entry.lastCommitHash && entry.lastCommitWhen}
 					<a
 						href={resolve(`${base}/commit/${entry.lastCommitHash}` as "/")}
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
index 9f465b99a..87fd32c97 100644
--- a/web/src/lib/components/repo/RefChip.svelte
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -1,3 +1,11 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const refChip = tv({
+		base: "flex w-fit items-center justify-center gap-1 whitespace-nowrap"
+	});
+</script>
+
 <script lang="ts">
 	import { resolve } from "$app/paths";
 
@@ -19,7 +27,7 @@
 	);
 </script>
 
-<div class="flex w-fit items-center justify-center gap-1 whitespace-nowrap {className}">
+<div class={refChip({ class: className })}>
 	<span class="text-foreground-muted">at{isCommit ? " commit" : ""}</span>
 	<a
 		href={treeHref}
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index 424c3eeb8..0bd7f8da5 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -1,3 +1,17 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const composeTab = tv({
+		base: "group flex flex-1 flex-col gap-1 rounded-sm p-3 text-left transition-colors disabled:cursor-not-allowed",
+		variants: {
+			active: {
+				true: "cursor-default border border-border-default bg-background-default shadow-xs",
+				false: "border border-transparent hover:bg-background-default/60"
+			}
+		}
+	});
+</script>
+
 <script lang="ts">
 	import { untrack } from "svelte";
 	import { SvelteURLSearchParams } from "svelte/reactivity";
@@ -261,10 +275,6 @@
 		"+++ b/file.txt"
 	].join("\n");
 
-	const tabBase =
-		"group flex flex-1 flex-col gap-1 rounded-sm p-3 text-left transition-colors disabled:cursor-not-allowed";
-	const tabActive = "cursor-default border border-border-default bg-background-default shadow-xs";
-	const tabIdle = "border border-transparent hover:bg-background-default/60";
 	const connector = "absolute top-3 -bottom-6 left-3 w-px -translate-x-1/2 bg-border-default";
 </script>
 
@@ -289,7 +299,7 @@
 	<button
 		type="button"
 		{disabled}
-		class="{tabBase} {view.source === mode ? tabActive : tabIdle}"
+		class={composeTab({ active: view.source === mode })}
 		onclick={() => view.source !== mode && navigate({ source: mode })}
 	>
 		<span class="typography-paragraph-small font-medium text-foreground-default">{heading}</span