diff --git a/.gitignore b/.gitignore
index f9b65d12..201c15df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,5 @@ dev
 local_output
 diff.txt
 
-docs/*
\ No newline at end of file
+docs/*
+.claude
\ No newline at end of file
diff --git a/src/common/utils/cn.ts b/src/common/utils/cn.ts
new file mode 100644
index 00000000..bdbf8c7f
--- /dev/null
+++ b/src/common/utils/cn.ts
@@ -0,0 +1,36 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+const twMerge = extendTailwindMerge<'wg-backdrop'>({
+	extend: {
+		classGroups: {
+			'wg-backdrop': ['bg-glass'],
+
+			'bg-color': ['bg-widget', 'bg-content', 'bg-raised'],
+			'text-color': ['text-strong', 'text-content', 'text-muted', 'text-subtle'],
+			'border-color': ['border-content', 'border-strong'],
+
+			rounded: ['rounded-widget', 'rounded-card'],
+			shadow: ['elevation-sm', 'elevation', 'elevation-lg'],
+			transition: ['transition-ui'],
+			'outline-style': ['focus-ring'],
+			z: [
+				'z-base',
+				'z-raised',
+				'z-sticky',
+				'z-drag',
+				'z-nav',
+				'z-backdrop',
+				'z-sheet',
+				'z-modal',
+				'z-popover',
+				'z-tooltip',
+				'z-toast',
+				'z-pet',
+			],
+		},
+	},
+})
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}