diff --git a/sites/docs/scripts/build-registry.ts b/sites/docs/scripts/build-registry.ts
index 8c51214a72..0b65140d5d 100644
--- a/sites/docs/scripts/build-registry.ts
+++ b/sites/docs/scripts/build-registry.ts
@@ -3,11 +3,11 @@ import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
 import { rimraf } from "rimraf";
-import { colorMapping, colors } from "../src/lib/registry/colors";
+import { generateBaseColorTemplate, getColorsData } from "../src/lib/components/colors/colors.js";
 import { registrySchema } from "../src/lib/registry/schema";
-import { themes } from "../src/lib/registry/themes";
+import { baseColors } from "../src/lib/registry/colors.js";
 import { buildRegistry } from "./registry";
-import { BASE_STYLES, BASE_STYLES_WITH_VARIABLES, THEME_STYLES_WITH_VARIABLES } from "./templates";
+import { THEME_STYLES_WITH_VARIABLES } from "../src/lib/registry/templates";
 import { getChunks } from "./transform-chunks";
 
 const REGISTRY_PATH = path.resolve("static", "registry");
@@ -191,30 +191,7 @@ export const Index = {
 		fs.mkdirSync(colorsTargetPath, { recursive: true });
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const colorsData: Record<string, any> = {};
-	for (const [color, value] of Object.entries(colors)) {
-		if (typeof value === "string") {
-			colorsData[color] = value;
-			continue;
-		}
-
-		if (Array.isArray(value)) {
-			colorsData[color] = value.map((item) => ({
-				...item,
-				oklch: item.oklch,
-			}));
-			continue;
-		}
-
-		if (typeof value === "object") {
-			colorsData[color] = {
-				...value,
-				oklch: value.oklch,
-			};
-			continue;
-		}
-	}
+	const colorsData = getColorsData();
 
 	writeFileWithDirs(
 		path.join(colorsTargetPath, "index.json"),
@@ -226,39 +203,16 @@ export const Index = {
 	// Build registry/colors/[base].json.
 	// ----------------------------------------------------------------------------
 
-	for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone", "lime"]) {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const base: Record<string, any> = {
-			inlineColors: {},
-			cssVars: {},
-		};
-		for (const [mode, values] of Object.entries(colorMapping)) {
-			base.inlineColors[mode] = {};
-			base.cssVars[mode] = {};
-			for (const [key, value] of Object.entries(values)) {
-				if (typeof value === "string") {
-					const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`);
-					base.inlineColors[mode][key] = resolvedColor;
-
-					const [resolvedBase, scale] = resolvedColor.split("-");
-					const color = scale
-						? colorsData[resolvedBase].find(
-								// eslint-disable-next-line @typescript-eslint/no-explicit-any
-								(item: any) => item.scale === Number.parseInt(scale)
-							)
-						: colorsData[resolvedBase];
-					if (color) {
-						base.cssVars[mode][key] = color.oklch;
-					}
-				}
-			}
-		}
+	const themeCSS = [];
+	for (const baseColor of baseColors) {
+		const base = generateBaseColorTemplate(baseColor);
 
-		// Build css vars.
-		base.inlineColorsTemplate = template(BASE_STYLES)({});
-		base.cssVarsTemplate = template(BASE_STYLES_WITH_VARIABLES)({
-			colors: base.cssVars,
-		});
+		themeCSS.push(
+			template(THEME_STYLES_WITH_VARIABLES)({
+				colors: base.cssVars,
+				theme: baseColor,
+			})
+		);
 
 		writeFileWithDirs(
 			path.join(REGISTRY_PATH, "colors", `${baseColor}.json`),
@@ -271,17 +225,7 @@ export const Index = {
 	// Build registry/themes.css
 	// ----------------------------------------------------------------------------
 
-	const themeCSS = [];
-	for (const theme of themes) {
-		themeCSS.push(
-			template(THEME_STYLES_WITH_VARIABLES)({
-				colors: theme.cssVars,
-				theme: theme.name,
-			})
-		);
-	}
-
-	writeFileWithDirs(path.join(THEMES_CSS_PATH, `themes.css`), themeCSS.join("\n"), "utf-8");
+	writeFileWithDirs(path.join(THEMES_CSS_PATH, `themes.css`), themeCSS.join("\n\n"), "utf-8");
 
 	console.info("✅ Done!");
 }
diff --git a/sites/docs/src/lib/components/colors/color-data.ts b/sites/docs/src/lib/components/colors/color-data.ts
deleted file mode 100644
index bd2e993427..0000000000
--- a/sites/docs/src/lib/components/colors/color-data.ts
+++ /dev/null
@@ -1,339 +0,0 @@
-// Function to convert hex to RGB
-function hexToRGB(hex: string): string {
-	const r = Number.parseInt(hex.slice(1, 3), 16);
-	const g = Number.parseInt(hex.slice(3, 5), 16);
-	const b = Number.parseInt(hex.slice(5, 7), 16);
-	return `rgb(${r}, ${g}, ${b})`;
-}
-
-// Function to convert hex to HSL
-function hexToHSL(hex: string): string {
-	const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
-	const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
-	const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
-
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
-	let h: number = 0;
-	let s: number = 0;
-	const l: number = (max + min) / 2;
-
-	if (max !== min) {
-		const d = max - min;
-		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-		switch (max) {
-			case r:
-				h = (g - b) / d + (g < b ? 6 : 0);
-				break;
-			case g:
-				h = (b - r) / d + 2;
-				break;
-			case b:
-				h = (r - g) / d + 4;
-				break;
-		}
-		h /= 6;
-	}
-
-	return `hsl(${(h * 360).toFixed(0)}, ${(s * 100).toFixed(0)}%, ${(l * 100).toFixed(0)}%)`;
-}
-
-// Function to create a color entry with all formats
-function createColorEntry(className: string, hex: string) {
-	return {
-		className,
-		hex,
-		hsl: hexToHSL(hex),
-		rgb: hexToRGB(hex),
-	};
-}
-
-// Updated color data with correct Tailwind CSS colors
-export const colorData = {
-	slate: {
-		50: createColorEntry("slate-50", "#f8fafc"),
-		100: createColorEntry("slate-100", "#f1f5f9"),
-		200: createColorEntry("slate-200", "#e2e8f0"),
-		300: createColorEntry("slate-300", "#cbd5e1"),
-		400: createColorEntry("slate-400", "#94a3b8"),
-		500: createColorEntry("slate-500", "#64748b"),
-		600: createColorEntry("slate-600", "#475569"),
-		700: createColorEntry("slate-700", "#334155"),
-		800: createColorEntry("slate-800", "#1e293b"),
-		900: createColorEntry("slate-900", "#0f172a"),
-		950: createColorEntry("slate-950", "#020617"),
-	},
-	gray: {
-		50: createColorEntry("gray-50", "#f9fafb"),
-		100: createColorEntry("gray-100", "#f3f4f6"),
-		200: createColorEntry("gray-200", "#e5e7eb"),
-		300: createColorEntry("gray-300", "#d1d5db"),
-		400: createColorEntry("gray-400", "#9ca3af"),
-		500: createColorEntry("gray-500", "#6b7280"),
-		600: createColorEntry("gray-600", "#4b5563"),
-		700: createColorEntry("gray-700", "#374151"),
-		800: createColorEntry("gray-800", "#1f2937"),
-		900: createColorEntry("gray-900", "#111827"),
-		950: createColorEntry("gray-950", "#030712"),
-	},
-	zinc: {
-		50: createColorEntry("zinc-50", "#fafafa"),
-		100: createColorEntry("zinc-100", "#f4f4f5"),
-		200: createColorEntry("zinc-200", "#e4e4e7"),
-		300: createColorEntry("zinc-300", "#d4d4d8"),
-		400: createColorEntry("zinc-400", "#a1a1aa"),
-		500: createColorEntry("zinc-500", "#71717a"),
-		600: createColorEntry("zinc-600", "#52525b"),
-		700: createColorEntry("zinc-700", "#3f3f46"),
-		800: createColorEntry("zinc-800", "#27272a"),
-		900: createColorEntry("zinc-900", "#18181b"),
-		950: createColorEntry("zinc-950", "#09090b"),
-	},
-	neutral: {
-		50: createColorEntry("neutral-50", "#fafafa"),
-		100: createColorEntry("neutral-100", "#f5f5f5"),
-		200: createColorEntry("neutral-200", "#e5e5e5"),
-		300: createColorEntry("neutral-300", "#d4d4d4"),
-		400: createColorEntry("neutral-400", "#a3a3a3"),
-		500: createColorEntry("neutral-500", "#737373"),
-		600: createColorEntry("neutral-600", "#525252"),
-		700: createColorEntry("neutral-700", "#404040"),
-		800: createColorEntry("neutral-800", "#262626"),
-		900: createColorEntry("neutral-900", "#171717"),
-		950: createColorEntry("neutral-950", "#0a0a0a"),
-	},
-	stone: {
-		50: createColorEntry("stone-50", "#fafaf9"),
-		100: createColorEntry("stone-100", "#f5f5f4"),
-		200: createColorEntry("stone-200", "#e7e5e4"),
-		300: createColorEntry("stone-300", "#d6d3d1"),
-		400: createColorEntry("stone-400", "#a8a29e"),
-		500: createColorEntry("stone-500", "#78716c"),
-		600: createColorEntry("stone-600", "#57534e"),
-		700: createColorEntry("stone-700", "#44403c"),
-		800: createColorEntry("stone-800", "#292524"),
-		900: createColorEntry("stone-900", "#1c1917"),
-		950: createColorEntry("stone-950", "#0c0a09"),
-	},
-	red: {
-		50: createColorEntry("red-50", "#fef2f2"),
-		100: createColorEntry("red-100", "#fee2e2"),
-		200: createColorEntry("red-200", "#fecaca"),
-		300: createColorEntry("red-300", "#fca5a5"),
-		400: createColorEntry("red-400", "#f87171"),
-		500: createColorEntry("red-500", "#ef4444"),
-		600: createColorEntry("red-600", "#dc2626"),
-		700: createColorEntry("red-700", "#b91c1c"),
-		800: createColorEntry("red-800", "#991b1b"),
-		900: createColorEntry("red-900", "#7f1d1d"),
-		950: createColorEntry("red-950", "#450a0a"),
-	},
-	orange: {
-		50: createColorEntry("orange-50", "#fff7ed"),
-		100: createColorEntry("orange-100", "#ffedd5"),
-		200: createColorEntry("orange-200", "#fed7aa"),
-		300: createColorEntry("orange-300", "#fdba74"),
-		400: createColorEntry("orange-400", "#fb923c"),
-		500: createColorEntry("orange-500", "#f97316"),
-		600: createColorEntry("orange-600", "#ea580c"),
-		700: createColorEntry("orange-700", "#c2410c"),
-		800: createColorEntry("orange-800", "#9a3412"),
-		900: createColorEntry("orange-900", "#7c2d12"),
-		950: createColorEntry("orange-950", "#431407"),
-	},
-	amber: {
-		50: createColorEntry("amber-50", "#fffbeb"),
-		100: createColorEntry("amber-100", "#fef3c7"),
-		200: createColorEntry("amber-200", "#fde68a"),
-		300: createColorEntry("amber-300", "#fcd34d"),
-		400: createColorEntry("amber-400", "#fbbf24"),
-		500: createColorEntry("amber-500", "#f59e0b"),
-		600: createColorEntry("amber-600", "#d97706"),
-		700: createColorEntry("amber-700", "#b45309"),
-		800: createColorEntry("amber-800", "#92400e"),
-		900: createColorEntry("amber-900", "#78350f"),
-		950: createColorEntry("amber-950", "#451a03"),
-	},
-	yellow: {
-		50: createColorEntry("yellow-50", "#fefce8"),
-		100: createColorEntry("yellow-100", "#fef9c3"),
-		200: createColorEntry("yellow-200", "#fef08a"),
-		300: createColorEntry("yellow-300", "#fde047"),
-		400: createColorEntry("yellow-400", "#facc15"),
-		500: createColorEntry("yellow-500", "#eab308"),
-		600: createColorEntry("yellow-600", "#ca8a04"),
-		700: createColorEntry("yellow-700", "#a16207"),
-		800: createColorEntry("yellow-800", "#854d0e"),
-		900: createColorEntry("yellow-900", "#713f12"),
-		950: createColorEntry("yellow-950", "#422006"),
-	},
-	lime: {
-		50: createColorEntry("lime-50", "#f7fee7"),
-		100: createColorEntry("lime-100", "#ecfccb"),
-		200: createColorEntry("lime-200", "#d9f99d"),
-		300: createColorEntry("lime-300", "#bef264"),
-		400: createColorEntry("lime-400", "#a3e635"),
-		500: createColorEntry("lime-500", "#84cc16"),
-		600: createColorEntry("lime-600", "#65a30d"),
-		700: createColorEntry("lime-700", "#4d7c0f"),
-		800: createColorEntry("lime-800", "#3f6212"),
-		900: createColorEntry("lime-900", "#365314"),
-		950: createColorEntry("lime-950", "#1a2e05"),
-	},
-	green: {
-		50: createColorEntry("green-50", "#f0fdf4"),
-		100: createColorEntry("green-100", "#dcfce7"),
-		200: createColorEntry("green-200", "#bbf7d0"),
-		300: createColorEntry("green-300", "#86efac"),
-		400: createColorEntry("green-400", "#4ade80"),
-		500: createColorEntry("green-500", "#22c55e"),
-		600: createColorEntry("green-600", "#16a34a"),
-		700: createColorEntry("green-700", "#15803d"),
-		800: createColorEntry("green-800", "#166534"),
-		900: createColorEntry("green-900", "#14532d"),
-		950: createColorEntry("green-950", "#052e16"),
-	},
-	emerald: {
-		50: createColorEntry("emerald-50", "#ecfdf5"),
-		100: createColorEntry("emerald-100", "#d1fae5"),
-		200: createColorEntry("emerald-200", "#a7f3d0"),
-		300: createColorEntry("emerald-300", "#6ee7b7"),
-		400: createColorEntry("emerald-400", "#34d399"),
-		500: createColorEntry("emerald-500", "#10b981"),
-		600: createColorEntry("emerald-600", "#059669"),
-		700: createColorEntry("emerald-700", "#047857"),
-		800: createColorEntry("emerald-800", "#065f46"),
-		900: createColorEntry("emerald-900", "#064e3b"),
-		950: createColorEntry("emerald-950", "#022c22"),
-	},
-	teal: {
-		50: createColorEntry("teal-50", "#f0fdfa"),
-		100: createColorEntry("teal-100", "#ccfbf1"),
-		200: createColorEntry("teal-200", "#99f6e4"),
-		300: createColorEntry("teal-300", "#5eead4"),
-		400: createColorEntry("teal-400", "#2dd4bf"),
-		500: createColorEntry("teal-500", "#14b8a6"),
-		600: createColorEntry("teal-600", "#0d9488"),
-		700: createColorEntry("teal-700", "#0f766e"),
-		800: createColorEntry("teal-800", "#115e59"),
-		900: createColorEntry("teal-900", "#134e4a"),
-		950: createColorEntry("teal-950", "#042f2e"),
-	},
-	cyan: {
-		50: createColorEntry("cyan-50", "#ecfeff"),
-		100: createColorEntry("cyan-100", "#cffafe"),
-		200: createColorEntry("cyan-200", "#a5f3fc"),
-		300: createColorEntry("cyan-300", "#67e8f9"),
-		400: createColorEntry("cyan-400", "#22d3ee"),
-		500: createColorEntry("cyan-500", "#06b6d4"),
-		600: createColorEntry("cyan-600", "#0891b2"),
-		700: createColorEntry("cyan-700", "#0e7490"),
-		800: createColorEntry("cyan-800", "#155e75"),
-		900: createColorEntry("cyan-900", "#164e63"),
-		950: createColorEntry("cyan-950", "#083344"),
-	},
-	sky: {
-		50: createColorEntry("sky-50", "#f0f9ff"),
-		100: createColorEntry("sky-100", "#e0f2fe"),
-		200: createColorEntry("sky-200", "#bae6fd"),
-		300: createColorEntry("sky-300", "#7dd3fc"),
-		400: createColorEntry("sky-400", "#38bdf8"),
-		500: createColorEntry("sky-500", "#0ea5e9"),
-		600: createColorEntry("sky-600", "#0284c7"),
-		700: createColorEntry("sky-700", "#0369a1"),
-		800: createColorEntry("sky-800", "#075985"),
-		900: createColorEntry("sky-900", "#0c4a6e"),
-		950: createColorEntry("sky-950", "#082f49"),
-	},
-	blue: {
-		50: createColorEntry("blue-50", "#eff6ff"),
-		100: createColorEntry("blue-100", "#dbeafe"),
-		200: createColorEntry("blue-200", "#bfdbfe"),
-		300: createColorEntry("blue-300", "#93c5fd"),
-		400: createColorEntry("blue-400", "#60a5fa"),
-		500: createColorEntry("blue-500", "#3b82f6"),
-		600: createColorEntry("blue-600", "#2563eb"),
-		700: createColorEntry("blue-700", "#1d4ed8"),
-		800: createColorEntry("blue-800", "#1e40af"),
-		900: createColorEntry("blue-900", "#1e3a8a"),
-		950: createColorEntry("blue-950", "#172554"),
-	},
-	indigo: {
-		50: createColorEntry("indigo-50", "#eef2ff"),
-		100: createColorEntry("indigo-100", "#e0e7ff"),
-		200: createColorEntry("indigo-200", "#c7d2fe"),
-		300: createColorEntry("indigo-300", "#a5b4fc"),
-		400: createColorEntry("indigo-400", "#818cf8"),
-		500: createColorEntry("indigo-500", "#6366f1"),
-		600: createColorEntry("indigo-600", "#4f46e5"),
-		700: createColorEntry("indigo-700", "#4338ca"),
-		800: createColorEntry("indigo-800", "#3730a3"),
-		900: createColorEntry("indigo-900", "#312e81"),
-		950: createColorEntry("indigo-950", "#1e1b4b"),
-	},
-	violet: {
-		50: createColorEntry("violet-50", "#f5f3ff"),
-		100: createColorEntry("violet-100", "#ede9fe"),
-		200: createColorEntry("violet-200", "#ddd6fe"),
-		300: createColorEntry("violet-300", "#c4b5fd"),
-		400: createColorEntry("violet-400", "#a78bfa"),
-		500: createColorEntry("violet-500", "#8b5cf6"),
-		600: createColorEntry("violet-600", "#7c3aed"),
-		700: createColorEntry("violet-700", "#6d28d9"),
-		800: createColorEntry("violet-800", "#5b21b6"),
-		900: createColorEntry("violet-900", "#4c1d95"),
-		950: createColorEntry("violet-950", "#2e1065"),
-	},
-	purple: {
-		50: createColorEntry("purple-50", "#faf5ff"),
-		100: createColorEntry("purple-100", "#f3e8ff"),
-		200: createColorEntry("purple-200", "#e9d5ff"),
-		300: createColorEntry("purple-300", "#d8b4fe"),
-		400: createColorEntry("purple-400", "#c084fc"),
-		500: createColorEntry("purple-500", "#a855f7"),
-		600: createColorEntry("purple-600", "#9333ea"),
-		700: createColorEntry("purple-700", "#7e22ce"),
-		800: createColorEntry("purple-800", "#6b21a8"),
-		900: createColorEntry("purple-900", "#581c87"),
-		950: createColorEntry("purple-950", "#3b0764"),
-	},
-	fuchsia: {
-		50: createColorEntry("fuchsia-50", "#fdf4ff"),
-		100: createColorEntry("fuchsia-100", "#fae8ff"),
-		200: createColorEntry("fuchsia-200", "#f5d0fe"),
-		300: createColorEntry("fuchsia-300", "#f0abfc"),
-		400: createColorEntry("fuchsia-400", "#e879f9"),
-		500: createColorEntry("fuchsia-500", "#d946ef"),
-		600: createColorEntry("fuchsia-600", "#c026d3"),
-		700: createColorEntry("fuchsia-700", "#a21caf"),
-		800: createColorEntry("fuchsia-800", "#86198f"),
-		900: createColorEntry("fuchsia-900", "#701a75"),
-		950: createColorEntry("fuchsia-950", "#4a044e"),
-	},
-	pink: {
-		50: createColorEntry("pink-50", "#fdf2f8"),
-		100: createColorEntry("pink-100", "#fce7f3"),
-		200: createColorEntry("pink-200", "#fbcfe8"),
-		300: createColorEntry("pink-300", "#f9a8d4"),
-		400: createColorEntry("pink-400", "#f472b6"),
-		500: createColorEntry("pink-500", "#ec4899"),
-		600: createColorEntry("pink-600", "#db2777"),
-		700: createColorEntry("pink-700", "#be185d"),
-		800: createColorEntry("pink-800", "#9d174d"),
-		900: createColorEntry("pink-900", "#831843"),
-		950: createColorEntry("pink-950", "#500724"),
-	},
-	rose: {
-		50: createColorEntry("rose-50", "#fff1f2"),
-		100: createColorEntry("rose-100", "#ffe4e6"),
-		200: createColorEntry("rose-200", "#fecdd3"),
-		300: createColorEntry("rose-300", "#fda4af"),
-		400: createColorEntry("rose-400", "#fb7185"),
-		500: createColorEntry("rose-500", "#f43f5e"),
-		600: createColorEntry("rose-600", "#e11d48"),
-		700: createColorEntry("rose-700", "#be123c"),
-		800: createColorEntry("rose-800", "#9f1239"),
-		900: createColorEntry("rose-900", "#881337"),
-		950: createColorEntry("rose-950", "#4c0519"),
-	},
-};
diff --git a/sites/docs/src/lib/components/colors/colors.ts b/sites/docs/src/lib/components/colors/colors.ts
index bf47da82b6..29d9b4f687 100644
--- a/sites/docs/src/lib/components/colors/colors.ts
+++ b/sites/docs/src/lib/components/colors/colors.ts
@@ -1,6 +1,8 @@
 import { z } from "zod";
 
-import { colors } from "$lib/registry/colors.js";
+import { colorMapping, colors, type BaseColor } from "$lib/registry/colors.js";
+import template from "lodash.template";
+import { BASE_STYLES, BASE_STYLES_WITH_VARIABLES } from "$lib/registry/templates.js";
 
 const colorSchema = z.object({
 	name: z.string(),
@@ -85,3 +87,71 @@ function getForegroundFromBackground(rgb: string) {
 
 	return luminance > 0.179 ? "#000" : "#fff";
 }
+
+export function generateBaseColorTemplate(baseColor: BaseColor) {
+	const colorsData = getColorsData();
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const base: Record<string, any> = {
+		inlineColors: {},
+		cssVars: {},
+	};
+	for (const [mode, values] of Object.entries(colorMapping)) {
+		base.inlineColors[mode] = {};
+		base.cssVars[mode] = {};
+		for (const [key, value] of Object.entries(values)) {
+			if (typeof value === "string") {
+				const resolvedColor = value.replace(/\{\{base\}\}-/g, `${baseColor}-`);
+				base.inlineColors[mode][key] = resolvedColor;
+
+				const [resolvedBase, scale] = resolvedColor.split("-");
+				const color = scale
+					? colorsData[resolvedBase].find(
+							// eslint-disable-next-line @typescript-eslint/no-explicit-any
+							(item: any) => item.scale === Number.parseInt(scale)
+						)
+					: colorsData[resolvedBase];
+				if (color) {
+					base.cssVars[mode][key] = color.oklch;
+				}
+			}
+		}
+	}
+
+	// Build css vars.
+	base.inlineColorsTemplate = template(BASE_STYLES)({});
+	base.cssVarsTemplate = template(BASE_STYLES_WITH_VARIABLES)({
+		colors: base.cssVars,
+	});
+
+	return base;
+}
+
+export function getColorsData() {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const colorsData: Record<string, any> = {};
+	for (const [color, value] of Object.entries(colors)) {
+		if (typeof value === "string") {
+			colorsData[color] = value;
+			continue;
+		}
+
+		if (Array.isArray(value)) {
+			colorsData[color] = value.map((item) => ({
+				...item,
+				oklch: item.oklch,
+			}));
+			continue;
+		}
+
+		if (typeof value === "object") {
+			colorsData[color] = {
+				...value,
+				oklch: value.oklch,
+			};
+			continue;
+		}
+	}
+
+	return colorsData;
+}
diff --git a/sites/docs/src/lib/components/docs/block-preview.svelte b/sites/docs/src/lib/components/docs/block-preview.svelte
index fd0bee2214..86d1c4747f 100644
--- a/sites/docs/src/lib/components/docs/block-preview.svelte
+++ b/sites/docs/src/lib/components/docs/block-preview.svelte
@@ -26,7 +26,7 @@
 		>
 			{#if isLoading}
 				<div
-					class="text-muted-foreground absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 text-sm"
+					class="text-muted-foreground h-(--container-height) absolute inset-0 z-10 flex w-full items-center justify-center gap-2 text-sm"
 				>
 					<Icon.Spinner class="size-4 animate-spin" />
 					Loading...
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/copy-code-button.svelte b/sites/docs/src/lib/components/docs/theme-customizer/copy-code-button.svelte
index 06f3e118cc..9052ab68d5 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/copy-code-button.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/copy-code-button.svelte
@@ -21,7 +21,7 @@
 				<Button {...props} class="flex" size="sm" variant="ghost">Copy Code</Button>
 			{/snippet}
 		</Dialog.Trigger>
-		<Dialog.Content class="max-w-2xl outline-none">
+		<Dialog.Content class="flex max-w-2xl flex-col outline-none">
 			<Dialog.Header>
 				<Dialog.Title>Theme</Dialog.Title>
 				<Dialog.Description>
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte b/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
index 6263580771..f01461723c 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/customizer-code.svelte
@@ -1,85 +1,20 @@
 <script lang="ts">
 	import { config } from "$lib/stores/index.js";
-	import { themes } from "$lib/registry/index.js";
 	import ThemeWrapper from "$lib/components/docs/theme-wrapper.svelte";
+	import { generateBaseColorTemplate } from "$lib/components/colors/colors.js";
 
-	const activeTheme = $derived(themes.find((theme) => theme.name === $config.theme));
+	const base = $derived(generateBaseColorTemplate($config.theme));
 
 	let { setCodeString }: { setCodeString: (node: HTMLElement) => void } = $props();
-
-	const prefixes = [
-		"card",
-		"popover",
-		"primary",
-		"secondary",
-		"muted",
-		"accent",
-		"destructive",
-	] as const;
 </script>
 
 <ThemeWrapper defaultTheme="zinc" class="relative space-y-4">
 	<div data-rehype-pretty-code-fragment="">
 		<pre
-			class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900"
-			use:setCodeString>
-            <code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
-                <span class="line text-white">@layer base &#123;</span>
-                <span class="line text-white">  :root &#123;</span>
-                <span class="line text-white">    --background: {activeTheme?.cssVars.light
-						.background};</span
-				>
-            <span class="line text-white">    --foreground: {activeTheme?.cssVars.light
-						.foreground};</span
-				>
-            {#each prefixes as prefix (prefix)}
-					<span class="line text-white">    --{prefix}: {activeTheme?.cssVars.light[
-							prefix
-						]};</span
-					>
-              <span
-						class="line text-white">    --{prefix}-foreground: {activeTheme?.cssVars
-							.light[`${prefix}-foreground`]};</span
-					>
-				{/each}
-                <span class="line text-white">    --border: {activeTheme?.cssVars.light
-						.border};</span
-				>
-                  <span class="line text-white">    --input: {activeTheme?.cssVars.light
-						.input};</span
-				>
-                  <span class="line text-white">    --ring: {activeTheme?.cssVars.light.ring};</span
-				>
-                  <span class="line text-white">    --radius: {$config.radius}rem;</span>
-                  <span class="line text-white">  &#125;</span>
-                  <span class="line text-white"></span>
-                  <span class="line text-white">  .dark &#123;</span>
-                  <span class="line text-white">    --background: {activeTheme?.cssVars.dark
-						.background};</span
-				>
-                  <span class="line text-white">    --foreground: {activeTheme?.cssVars.dark
-						.foreground};</span
-				>
-                  {#each prefixes as prefix (prefix)}
-					<span class="line text-white">    --{prefix}: {activeTheme?.cssVars.dark[
-							prefix
-						]};</span
-					>
-            <span
-						class="line text-white">    --{prefix}-foreground: {activeTheme?.cssVars
-							.dark[`${prefix}-foreground`]};</span
-					>
-				{/each}
-                <span class="line text-white">    --border: {activeTheme?.cssVars.dark
-						.border};</span
-				>
-                  <span class="line text-white">    --input: {activeTheme?.cssVars.dark
-						.input};</span
-				>
-                  <span class="line text-white">    --ring: {activeTheme?.cssVars.dark.ring};</span>
-                  <span class="line text-white">  &#125;</span>
-                  <span class="line text-white">&#125;</span>
-            </code>
-        </pre>
+			class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 p-4 dark:bg-zinc-900"
+			use:setCodeString><code
+				class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
+				>{base.cssVarsTemplate}</code
+			></pre>
 	</div>
 </ThemeWrapper>
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte b/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
index 42168ee1c1..69ed89bdcd 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/customizer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Check from "@lucide/svelte/icons/check";
 	import CircleHelp from "@lucide/svelte/icons/circle-help";
 	import Moon from "@lucide/svelte/icons/moon";
 	import Repeat from "@lucide/svelte/icons/repeat";
@@ -79,15 +78,12 @@
 						onclick={() => {
 							$config.theme = theme.name;
 						}}
-						class={cn("justify-start", isActive && "border-primary border-2")}
+						class={cn("justify-start gap-0", isActive && "border-primary border-2")}
 						style="--theme-primary: hsl({theme.activeColor[$mode ?? 'dark']})"
 					>
 						<span
-							class="mr-1 flex size-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+							class="bg-(--theme-primary) mr-1 flex size-4 shrink-0 -translate-x-1 items-center justify-center rounded-full"
 						>
-							{#if isActive}
-								<Check class="size-4 text-white" />
-							{/if}
 						</span>
 						{theme.label}
 					</Button>
diff --git a/sites/docs/src/lib/components/docs/theme-customizer/theme-customizer.svelte b/sites/docs/src/lib/components/docs/theme-customizer/theme-customizer.svelte
index ae5a45d7e2..9a103ab857 100644
--- a/sites/docs/src/lib/components/docs/theme-customizer/theme-customizer.svelte
+++ b/sites/docs/src/lib/components/docs/theme-customizer/theme-customizer.svelte
@@ -4,10 +4,13 @@
 	import * as Popover from "$lib/registry/ui/popover/index.js";
 	import * as Drawer from "$lib/registry/ui/drawer/index.js";
 	import Button from "$lib/registry/ui/button/button.svelte";
+	import { IsMobile } from "$lib/registry/hook/is-mobile.svelte.js";
+
+	const isMobile = new IsMobile();
 </script>
 
 <div class="flex items-center gap-2">
-	<div class="block md:hidden">
+	{#if isMobile.current}
 		<Drawer.Root>
 			<Drawer.Trigger>
 				{#snippet child({ props })}
@@ -18,8 +21,7 @@
 				<Customizer />
 			</Drawer.Content>
 		</Drawer.Root>
-	</div>
-	<div class="hidden md:block">
+	{:else}
 		<Popover.Root>
 			<Popover.Trigger>
 				{#snippet child({ props })}
@@ -28,11 +30,11 @@
 			</Popover.Trigger>
 			<Popover.Content
 				class="z-40 w-[340px] rounded-[0.5rem] bg-white p-6 dark:bg-zinc-950"
-				align="end"
+				align="start"
 			>
 				<Customizer />
 			</Popover.Content>
 		</Popover.Root>
-	</div>
+	{/if}
 	<ThemeCopyCodeButton />
 </div>
diff --git a/sites/docs/src/lib/registry/colors.ts b/sites/docs/src/lib/registry/colors.ts
index de16160f9f..6ed47c4887 100644
--- a/sites/docs/src/lib/registry/colors.ts
+++ b/sites/docs/src/lib/registry/colors.ts
@@ -5,7 +5,7 @@ export type CompleteColorFormat = {
 	oklch: string;
 };
 
-type ColorScale = {
+export type ColorScale = {
 	scale: number;
 	hex: string;
 	rgb: string;
@@ -13,7 +13,7 @@ type ColorScale = {
 	oklch: string;
 };
 
-type Colors = {
+export type Colors = {
 	inherit: string;
 	current: string;
 	transparent: string;
@@ -43,6 +43,33 @@ type Colors = {
 	rose: ColorScale[];
 };
 
+export const baseColors = [
+	"slate",
+	"gray",
+	"zinc",
+	"neutral",
+	"stone",
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose",
+] as const;
+
+export type BaseColor = (typeof baseColors)[number];
+
 export const colors: Colors = {
 	inherit: "inherit",
 	current: "currentColor",
diff --git a/sites/docs/scripts/templates.ts b/sites/docs/src/lib/registry/templates.ts
similarity index 99%
rename from sites/docs/scripts/templates.ts
rename to sites/docs/src/lib/registry/templates.ts
index 4e11d217b8..2fb8a4c48e 100644
--- a/sites/docs/scripts/templates.ts
+++ b/sites/docs/src/lib/registry/templates.ts
@@ -117,8 +117,7 @@ export const BASE_STYLES_WITH_VARIABLES = `@import "tailwindcss";
   }
 }`;
 
-export const THEME_STYLES_WITH_VARIABLES = `
-.theme-<%- theme %> {
+export const THEME_STYLES_WITH_VARIABLES = `.theme-<%- theme %> {
   --background: <%- colors.light["background"] %>;
   --foreground: <%- colors.light["foreground"] %>;
   --muted: <%- colors.light["muted"] %>;
diff --git a/sites/docs/src/lib/registry/ui/button/button.svelte b/sites/docs/src/lib/registry/ui/button/button.svelte
index 8311a1c59c..ea6b340c51 100644
--- a/sites/docs/src/lib/registry/ui/button/button.svelte
+++ b/sites/docs/src/lib/registry/ui/button/button.svelte
@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all hover:cursor-pointer focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",