diff --git a/apps/www/src/lib/components/ui/label/Label.svelte b/apps/www/src/lib/components/ui/label/Label.svelte
index f1f17a4c1..636940778 100644
--- a/apps/www/src/lib/components/ui/label/Label.svelte
+++ b/apps/www/src/lib/components/ui/label/Label.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
-	import { cva } from "class-variance-authority";
-	import { Label as LabelPrimitive } from "radix-svelte";
 	import { cn } from "$lib/utils";
-
-	const labelVariants = cva(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-	);
+	import { getLabel, melt } from ".";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
+
+	const label = getLabel();
 </script>
 
-<LabelPrimitive.Root class={cn(labelVariants(), className)} {...$$restProps}>
+<label
+	use:melt={$label}
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+>
 	<slot />
-</LabelPrimitive.Root>
+</label>
diff --git a/apps/www/src/lib/components/ui/label/index.ts b/apps/www/src/lib/components/ui/label/index.ts
index 5a8bf391f..0b65d042b 100644
--- a/apps/www/src/lib/components/ui/label/index.ts
+++ b/apps/www/src/lib/components/ui/label/index.ts
@@ -1 +1,10 @@
+import { createLabel, melt } from "@melt-ui/svelte";
+
 export { default as Label } from "./Label.svelte";
+export { melt };
+export function getLabel() {
+	const {
+		elements: { root: label }
+	} = createLabel();
+	return label;
+}