Repository: melt-ui/melt-ui
Pull request #304 (2023-07-30 18:16:11)

The Big Bad - Part 4: The PP
This PR replaces all instances of the `melt` attribute for the `use:melt` action.

Before merging, I'd like to:
- [x] update the PP to fix this issue: https://github.com/melt-ui/preprocessor/issues/31


Patch:
diff --git a/.changeset/bright-fans-grow.md b/.changeset/bright-fans-grow.md
new file mode 100644
index 00000000..3d4080cc
--- /dev/null
+++ b/.changeset/bright-fans-grow.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': minor
+---
+
+Replaced the `melt` attribute for the `use:melt` action
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 69370bb4..f06b60a7 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.6.1
+          version: 8.6.3
           run_install: true
       - run: pnpm run lint
 
@@ -32,7 +32,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.6.1
+          version: 8.6.3
           run_install: true
       - run: pnpm run check
       
@@ -43,7 +43,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.6.1
+          version: 8.6.3
           run_install: true
       - run: pnpm run test
       
\ No newline at end of file
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 00828266..b77bf06c 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,7 +22,7 @@ jobs:
           fetch-depth: 0
       - uses: pnpm/action-setup@v2.2.4
         with:
-          version: 8.6.1
+          version: 8.6.3
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
diff --git a/package.json b/package.json
index 76e01fab..5c291b0b 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
 		"@huntabyte/mdsvex": "0.16.5",
 		"@iconify-json/lucide": "^1.1.104",
 		"@iconify-json/simple-icons": "^1.1.57",
-		"@melt-ui/pp": "^0.0.5",
+		"@melt-ui/pp": "0.1.0-next.1",
 		"@playwright/test": "^1.36.0",
 		"@storybook/addon-essentials": "^7.0.23",
 		"@storybook/addon-interactions": "^7.0.23",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8882537c..8ddd3f40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,8 +32,8 @@ devDependencies:
     specifier: ^1.1.57
     version: 1.1.57
   '@melt-ui/pp':
-    specifier: ^0.0.5
-    version: 0.0.5(@melt-ui/svelte@0.22.2)(svelte@4.0.0)
+    specifier: 0.1.0-next.1
+    version: 0.1.0-next.1(@melt-ui/svelte@0.22.2)(svelte@4.0.0)
   '@playwright/test':
     specifier: ^1.36.0
     version: 1.36.0
@@ -2810,10 +2810,11 @@ packages:
       react: 18.2.0
     dev: true
 
-  /@melt-ui/pp@0.0.5(@melt-ui/svelte@0.22.2)(svelte@4.0.0):
-    resolution: {integrity: sha512-KFfZXn70wHzEX8jkGy0p+MJpPuv1HS8THF3glZI5kuOGWSvLjVoxtuNhk5UuJSzsNk0OlIlVaAZIRSPrswE5Gw==}
+  /@melt-ui/pp@0.1.0-next.1(@melt-ui/svelte@0.22.2)(svelte@4.0.0):
+    resolution: {integrity: sha512-PeHBH++OhNJkzH43G+OnuW1KYyazOAAnGnUdd0XWdbJQvnhXiKnmqpItHzqVok+6iI5yDgRfa5HfQB586k0EFQ==}
+    engines: {pnpm: '>=8.6.3'}
     peerDependencies:
-      '@melt-ui/svelte': ^0.22.0
+      '@melt-ui/svelte': '>= 0.22.0'
       svelte: ^3.55.0 || ^4.0.0
     dependencies:
       '@melt-ui/svelte': 0.22.2(svelte@4.0.0)
diff --git a/src/docs/components/info-popover.svelte b/src/docs/components/info-popover.svelte
index 4bfc779c..da3e3db1 100644
--- a/src/docs/components/info-popover.svelte
+++ b/src/docs/components/info-popover.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '$docs/utils';
-	import { createPopover } from '@melt-ui/svelte';
+	import { createPopover, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { Info } from 'lucide-svelte';
 
@@ -13,20 +13,20 @@
 	export let contentClasses = '';
 </script>
 
-<button melt={$trigger} aria-label="More info">
+<button use:melt={$trigger} aria-label="More info">
 	<Info class={cn('h-4 w-4 text-white', iconClasses)} />
 	<span class="sr-only">Open popover</span>
 </button>
 {#if $open}
 	<div
-		melt={$content}
+		use:melt={$content}
 		transition:fade={{ duration: 100 }}
 		class={cn(
 			'mdsvex z-30 max-w-[300px] rounded-md bg-zinc-800 px-4 py-3 shadow-sm shadow-neutral-800',
 			contentClasses
 		)}
 	>
-		<div melt={$arrow} />
+		<div use:melt={$arrow} />
 		<p class="text-sm leading-5 text-white">
 			<slot />
 		</p>
diff --git a/src/docs/components/nav/mobile-nav.svelte b/src/docs/components/nav/mobile-nav.svelte
index a9eb9841..d3d5994e 100644
--- a/src/docs/components/nav/mobile-nav.svelte
+++ b/src/docs/components/nav/mobile-nav.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { fade, fly } from 'svelte/transition';
 	import { Menu, X } from 'lucide-svelte';
 	import { Button, MobileNavLink } from '$docs/components';
@@ -14,7 +14,7 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="ml-6 text-neutral-400 transition-colors hover:text-neutral-50 md:hidden"
 >
 	<Menu class="h-6 w-6" />
@@ -22,12 +22,12 @@
 </button>
 {#if $open}
 	<div
-		melt={$overlay}
+		use:melt={$overlay}
 		class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm"
 		transition:fade={{ duration: 150 }}
 	/>
 	<div
-		melt={$content}
+		use:melt={$content}
 		class="menu safe-area fixed bottom-0 z-50 h-2/3 w-full bg-neutral-900 px-2
 				 pt-6 shadow-lg focus:outline-none"
 		transition:fly={{ y: 768, duration: 300, opacity: 1 }}
diff --git a/src/docs/components/preview-style-select.svelte b/src/docs/components/preview-style-select.svelte
index 74f8a3de..b335a4e9 100644
--- a/src/docs/components/preview-style-select.svelte
+++ b/src/docs/components/preview-style-select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSelect, type SelectOptionProps } from '$lib';
+	import { createSelect, melt, type SelectOptionProps } from '$lib';
 	import { ChevronDown, Check } from 'lucide-svelte';
 	import { beforeNavigate } from '$app/navigation';
 	import type { Writable } from 'svelte/store';
@@ -23,7 +23,7 @@
 <button
 	class="flex w-[140px] items-center justify-between rounded-md border border-magnum-700 bg-neutral-800 px-3 py-1
   text-magnum-600 outline-none transition-opacity hover:opacity-75 focus:!border-magnum-400 focus:!text-magnum-400"
-	melt={$trigger}
+	use:melt={$trigger}
 	aria-label="Select"
 >
 	{$valueLabel === 'tailwind' ? 'Tailwind' : 'CSS'}
@@ -33,14 +33,14 @@
 <ul
 	class="0 z-10 flex max-h-[360px] flex-col
   overflow-y-auto rounded-md bg-neutral-800 p-1 shadow-md"
-	melt={$menu}
+	use:melt={$menu}
 >
 	{#each options as o}
 		<li
 			class="relative cursor-pointer rounded-md py-1 pl-8 pr-4 text-neutral-400 outline-none focus:!text-magnum-400
 			data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[selected]:text-magnum-600
 			data-[disabled]:line-through"
-			melt={$option({ ...o })}
+			use:melt={$option({ ...o })}
 		>
 			{#if $isSelected(o.value)}
 				<div class="check">
diff --git a/src/docs/components/switch.svelte b/src/docs/components/switch.svelte
index fc163d95..d4fa76c3 100644
--- a/src/docs/components/switch.svelte
+++ b/src/docs/components/switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { beforeNavigate } from '$app/navigation';
-	import { createSwitch } from '$lib';
+	import { createSwitch, melt } from '$lib';
 	import { generateId } from '$lib/internal/helpers';
 
 	export let checked: boolean | undefined = false;
@@ -30,7 +30,7 @@
 <div class="flex items-center gap-2">
 	<label class="font-semibold text-white" id={labelId} for={id}><slot /></label>
 	<button
-		melt={$root}
+		use:melt={$root}
 		class="relative h-6 w-11 cursor-default rounded-full bg-magnum-900 outline-none
  data-[state=checked]:bg-magnum-700"
 		{id}
diff --git a/src/docs/components/tabs/list.svelte b/src/docs/components/tabs/list.svelte
index 05709a60..a452a728 100644
--- a/src/docs/components/tabs/list.svelte
+++ b/src/docs/components/tabs/list.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { melt } from '@melt-ui/svelte';
 	import { getTabsContext } from './root.svelte';
 	import Tab from './tab.svelte';
 
 	const { list, tabs } = getTabsContext();
 </script>
 
-<div class="flex items-center gap-3" melt={$list}>
+<div class="flex items-center gap-3" use:melt={$list}>
 	{#each $tabs as tab}
 		<Tab {tab} />
 	{/each}
diff --git a/src/docs/components/tabs/root.svelte b/src/docs/components/tabs/root.svelte
index 2b5664ce..6b37ac45 100644
--- a/src/docs/components/tabs/root.svelte
+++ b/src/docs/components/tabs/root.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import { createTabs } from '$lib';
+	import { createTabs, melt } from '$lib';
 	import { getContext, setContext } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 
@@ -35,6 +35,6 @@
 	setTabsContext({ content, list, trigger, tabs: tabsStore });
 </script>
 
-<div melt={$root}>
+<div use:melt={$root}>
 	<slot tab={$value} />
 </div>
diff --git a/src/docs/components/tabs/tab.svelte b/src/docs/components/tabs/tab.svelte
index be720f14..2334271e 100644
--- a/src/docs/components/tabs/tab.svelte
+++ b/src/docs/components/tabs/tab.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getTabsContext } from '$docs/components/tabs/root.svelte';
 	import { Npm, Yarn, Pnpm } from '$docs/components/icons';
+	import { melt } from '@melt-ui/svelte';
 
 	export let tab: string;
 
@@ -8,7 +9,7 @@
 </script>
 
 <button
-	melt={$trigger(tab)}
+	use:melt={$trigger(tab)}
 	class="rounded-md border border-transparent bg-neutral-800 px-3 py-2 text-neutral-400 transition
         hover:opacity-100 focus:!border-magnum-400 focus:!text-magnum-400
         data-[state=active]:border-magnum-700 data-[state=active]:py-2 data-[state=active]:text-magnum-600 data-[state=active]:opacity-100"
diff --git a/src/docs/components/type-dialog.svelte b/src/docs/components/type-dialog.svelte
index 14d81221..0f02f08a 100644
--- a/src/docs/components/type-dialog.svelte
+++ b/src/docs/components/type-dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '$lib/builders';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
 	import { CodeBlock } from '$docs/components';
@@ -14,14 +14,14 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="relative inline rounded-md bg-neutral-700/50 px-[0.25rem] py-[0.15rem] font-mono text-[0.75rem] text-xs font-semibold text-neutral-50 underline underline-offset-4 transition-all hover:underline-offset-[6px]"
 	aria-label="Open type dialog"
 >
 	{name}
 </button>
 {#if $open}
-	<div melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
+	<div use:melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
 	<div
 		class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[960px]
     translate-x-[-50%] translate-y-[-50%] rounded-md
@@ -31,10 +31,10 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
 		<div class="mb-2">
-			<code class="inline-code !text-xl" melt={$title}>{name}</code>
+			<code class="inline-code !text-xl" use:melt={$title}>{name}</code>
 		</div>
 		<div class="relative">
 			<CodeBlock class="rounded-md bg-neutral-900" copyBtnClasses="top-4 right-4">
@@ -42,7 +42,7 @@
 			</CodeBlock>
 		</div>
 		<button
-			melt={$close}
+			use:melt={$close}
 			aria-label="Close"
 			class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-300
diff --git a/src/docs/content/builders/accordion.md b/src/docs/content/builders/accordion.md
index 6d31d57a..e432bfa6 100644
--- a/src/docs/content/builders/accordion.md
+++ b/src/docs/content/builders/accordion.md
@@ -32,7 +32,7 @@ heading element, like so:
 
 ```svelte
 <h2>
-	<button melt={$trigger(id)}>
+	<button use:melt={$trigger(id)}>
 		{title}
 	</button>
 </h2>
@@ -50,8 +50,8 @@ the heading level to 4.
 ```
 
 ```svelte {1}
-<span melt={$heading(4)}>
-    <button melt={$trigger(id)}>
+<span use:melt={$heading(4)}>
+    <button use:melt={$trigger(id)}>
         {title}
     </button>
 <span>
@@ -62,7 +62,7 @@ the heading level to 4.
 To disable a single item, you can pass in an object instead of a string to the function.
 
 ```svelte /{ value: 'item-3', disabled: true }/#hi
-<div class="accordion-item" melt={$item({ value: 'item-3', disabled: true })}>Item 3</div>
+<div class="accordion-item" use:melt={$item({ value: 'item-3', disabled: true })}>Item 3</div>
 ```
 
 <Preview code={snippets.disabled}>
@@ -92,7 +92,7 @@ update the `options` store with new arguments.
 
 ```svelte {4,15,19,21}
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte'
+	import { createAccordion, melt } from '@melt-ui/svelte'
 
 	let value: string | string[] | undefined = 'item-1'
 	let disabled = false
@@ -124,24 +124,24 @@ update the `options` store with new arguments.
 
 <p>Value: {value} Value Store: {$valueStore}</p>
 
-<div melt={$root}>
-	<div melt={$item('item-1')}>
-		<button melt={$trigger('item-1')}>Is it accessible?</button>
-		<div melt={$content('item-1')}>
+<div use:melt={$root}>
+	<div use:melt={$item('item-1')}>
+		<button use:melt={$trigger('item-1')}>Is it accessible?</button>
+		<div use:melt={$content('item-1')}>
 			<div>Yes. It adheres to the WAI-ARIA design pattern.</div>
 		</div>
 	</div>
 
-	<div melt={$item('item-2')}>
-		<button melt={$trigger('item-2')}>Is it accessible?</button>
-		<div melt={$content('item-2')}>
+	<div use:melt={$item('item-2')}>
+		<button use:melt={$trigger('item-2')}>Is it accessible?</button>
+		<div use:melt={$content('item-2')}>
 			<div>Yes. It adheres to the WAI-ARIA design pattern.</div>
 		</div>
 	</div>
 
-	<div melt={$item('item-3')}>
-		<button melt={$trigger('item-3')}>Is it accessible?</button>
-		<div melt={$content('item-3')}>
+	<div use:melt={$item('item-3')}>
+		<button use:melt={$trigger('item-3')}>Is it accessible?</button>
+		<div use:melt={$content('item-3')}>
 			<div>Yes. It adheres to the WAI-ARIA design pattern.</div>
 		</div>
 	</div>
diff --git a/src/docs/content/builders/context-menu.md b/src/docs/content/builders/context-menu.md
index 35d1e351..3ab69f3f 100644
--- a/src/docs/content/builders/context-menu.md
+++ b/src/docs/content/builders/context-menu.md
@@ -28,7 +28,7 @@ The first thing you need to do is create a dropdown menu using the `createDropdo
 
 ```svelte {3}
 <script lang="ts">
-	import { createContextMenu } from '@melt-ui/svelte'
+	import { createContextMenu, melt } from '@melt-ui/svelte'
 	const { menu, item, trigger, arrow } = createContextMenu()
 </script>
 ```
@@ -38,16 +38,16 @@ example of how to structure the menu is shown below.
 
 ```svelte
 <script lang="ts">
-	import { createContextMenu } from '@melt-ui/svelte'
+	import { createContextMenu, melt } from '@melt-ui/svelte'
 	const { menu, item, trigger, arrow } = createContextMenu()
 </script>
 
-<span melt={$trigger}>Right click here.</span>
-<div melt={$menu}>
+<span use:melt={$trigger}>Right click here.</span>
+<div use:melt={$menu}>
 	<div {...$item} use:item>...</div>
 	<div {...$item} use:item>...</div>
 	<div {...$item} use:item>...</div>
-	<div melt={$arrow} />
+	<div use:melt={$arrow} />
 </div>
 ```
 
diff --git a/src/docs/content/builders/dialog.md b/src/docs/content/builders/dialog.md
index d9a04fe7..b906a7e6 100644
--- a/src/docs/content/builders/dialog.md
+++ b/src/docs/content/builders/dialog.md
@@ -19,19 +19,19 @@ At a high level, the anatomy of a dialog looks like this:
 
 ```svelte
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte'
+	import { createDialog, melt } from '@melt-ui/svelte'
 	const { trigger, portal, overlay, content, title, description, close, open } = createDialog()
 </script>
 
-<button melt={$trigger}> Open Dialog </button>
+<button use:melt={$trigger}> Open Dialog </button>
 
 <div use:portal>
 	{#if $open}
-		<div melt={$overlay} />
-		<div melt={$content}>
-			<h2 melt={$title}>Dialog Title</h2>
-			<p melt={$description}>Dialog description</p>
-			<button melt={$close}> Close Dialog </button>
+		<div use:melt={$overlay} />
+		<div use:melt={$content}>
+			<h2 use:melt={$title}>Dialog Title</h2>
+			<p use:melt={$description}>Dialog description</p>
+			<button use:melt={$close}> Close Dialog </button>
 		</div>
 	{/if}
 </div>
diff --git a/src/docs/content/builders/dropdown-menu.md b/src/docs/content/builders/dropdown-menu.md
index 124f82f1..833fee0e 100644
--- a/src/docs/content/builders/dropdown-menu.md
+++ b/src/docs/content/builders/dropdown-menu.md
@@ -28,7 +28,7 @@ The first thing you need to do is create a dropdown menu using the `createDropdo
 
 ```svelte {3}
 <script lang="ts">
-	import { createDropdownMenu } from '@melt-ui/svelte'
+	import { createDropdownMenu, melt } from '@melt-ui/svelte'
 	const { menu, item, trigger, arrow } = createDropdownMenu()
 </script>
 ```
@@ -38,16 +38,16 @@ example of how to structure the menu is shown below.
 
 ```svelte
 <script lang="ts">
-	import { createDropdownMenu } from '@melt-ui/svelte'
+	import { createDropdownMenu, melt } from '@melt-ui/svelte'
 	const { menu, item, trigger, arrow } = createDropdownMenu()
 </script>
 
-<button melt={$trigger}>Click me</button>
-<div melt={$menu}>
+<button use:melt={$trigger}>Click me</button>
+<div use:melt={$menu}>
 	<div {...$item} use:item>...</div>
 	<div {...$item} use:item>...</div>
 	<div {...$item} use:item>...</div>
-	<div melt={$arrow} />
+	<div use:melt={$arrow} />
 </div>
 ```
 
diff --git a/src/docs/content/builders/hover-card.md b/src/docs/content/builders/hover-card.md
index 2ddfa398..b23fa11d 100644
--- a/src/docs/content/builders/hover-card.md
+++ b/src/docs/content/builders/hover-card.md
@@ -27,7 +27,7 @@ Create a hovercard using the `createHoverCard` builder function.
 
 ```svelte {3}
 <script lang="ts">
-	import { createHoverCard } from '@melt-ui/svelte'
+	import { createHoverCard, melt } from '@melt-ui/svelte'
 	const { trigger, content, open, arrow } = createHoverCard()
 </script>
 ```
@@ -37,15 +37,15 @@ example of how to structure the hovercard is shown below.
 
 ```svelte
 <script lang="ts">
-	import { createHoverCard } from '@melt-ui/svelte'
+	import { createHoverCard, melt } from '@melt-ui/svelte'
 	const { trigger, content, arrow } = createHoverCard()
 </script>
 
-<button melt={$trigger}>Hover Me</button>
+<button use:melt={$trigger}>Hover Me</button>
 
-<div melt={$content}>
+<div use:melt={$content}>
 	<div>I am content inside the hover card</div>
-	<div melt={$arrow} />
+	<div use:melt={$arrow} />
 </div>
 ```
 
diff --git a/src/docs/content/builders/menubar.md b/src/docs/content/builders/menubar.md
index 933b5e4c..ec683c7e 100644
--- a/src/docs/content/builders/menubar.md
+++ b/src/docs/content/builders/menubar.md
@@ -44,15 +44,15 @@ function and wrap it in a `menubar` element.
 
 ```svelte {5}
 <script lang="ts">
-	import { createMenubar } from '@melt-ui/svelte'
+	import { createMenubar, melt } from '@melt-ui/svelte'
 
 	const { menubar, createMenu } = createMenubar()
 	const { menu, item, trigger } = createMenu()
 </script>
 
-<div melt={$menubar}>
-	<button melt={$trigger}>Open Menu</button>
-	<div melt={$menu}>
+<div use:melt={$menubar}>
+	<button use:melt={$trigger}>Open Menu</button>
+	<div use:melt={$menu}>
 		<div {...$item} use:item>...</div>
 		<div {...$item} use:item>...</div>
 		<div {...$item} use:item>...</div>
@@ -70,7 +70,7 @@ returned variables to prevent any naming conflicts.
 
 ```svelte {6-7}
 <script lang="ts">
-	import { createMenubar } from '@melt-ui/svelte'
+	import { createMenubar, melt } from '@melt-ui/svelte'
 
 	const { menubar, createMenu } = createMenubar()
 	const { menu, item, trigger } = createMenu()
@@ -78,23 +78,23 @@ returned variables to prevent any naming conflicts.
 	const { menu: menuB, item: itemB, trigger: triggerB } = createMenu()
 </script>
 
-<div melt={$menubar}>
-	<button melt={$trigger}>File</button>
-	<div melt={$menu}>
+<div use:melt={$menubar}>
+	<button use:melt={$trigger}>File</button>
+	<div use:melt={$menu}>
 		<div {...$item} use:item>...</div>
 		<div {...$item} use:item>...</div>
 		<div {...$item} use:item>...</div>
 	</div>
 
-	<button melt={$triggerA}>Edit</button>
-	<div melt={$menuA}>
+	<button use:melt={$triggerA}>Edit</button>
+	<div use:melt={$menuA}>
 		<div {...$itemA} use:itemA>...</div>
 		<div {...$itemA} use:itemA>...</div>
 		<div {...$itemA} use:itemA>...</div>
 	</div>
 
-	<button melt={$triggerB}>Help</button>
-	<div melt={$menuB}>
+	<button use:melt={$triggerB}>Help</button>
+	<div use:melt={$menuB}>
 		<div {...$itemB} use:itemB>...</div>
 		<div {...$itemB} use:itemB>...</div>
 		<div {...$itemB} use:itemB>...</div>
diff --git a/src/docs/content/builders/pagination.md b/src/docs/content/builders/pagination.md
index 4a1384ec..62becc1f 100644
--- a/src/docs/content/builders/pagination.md
+++ b/src/docs/content/builders/pagination.md
@@ -24,7 +24,7 @@ the example above to create your pagination component.
 
 ```svelte
 <script lang="ts">
-	import { createPagination } from '@melt-ui/svelte'
+	import { createPagination, melt } from '@melt-ui/svelte'
 	const { prevButton, nextButton, pages, pageTrigger, range, root } = createPagination({
 		count: 100,
 		perPage: 10,
@@ -33,18 +33,18 @@ the example above to create your pagination component.
 	})
 </script>
 
-<nav melt={$root}>
+<nav use:melt={$root}>
 	<p>Showing items {$range.start} - {$range.end}</p>
 	<div>
-		<button melt={$prevButton}>Prev</button>
+		<button use:melt={$prevButton}>Prev</button>
 		{#each $pages as page (page.key)}
 			{#if page.type === 'ellipsis'}
 				<span>...</span>
 			{:else}
-				<button melt={$pageTrigger(page)}>{page.value}</button>
+				<button use:melt={$pageTrigger(page)}>{page.value}</button>
 			{/if}
 		{/each}
-		<button melt={$nextButton}>Next</button>
+		<button use:melt={$nextButton}>Next</button>
 	</div>
 </nav>
 ```
diff --git a/src/docs/content/builders/tags-input.md b/src/docs/content/builders/tags-input.md
index 8c29c0f1..00196e9b 100644
--- a/src/docs/content/builders/tags-input.md
+++ b/src/docs/content/builders/tags-input.md
@@ -27,7 +27,7 @@ Use the `createTagsInput` builder function.
 
 ```svelte
 <script lang="ts">
-	import { createTagsInput } from '@melt-ui/svelte'
+	import { createTagsInput, melt } from '@melt-ui/svelte'
 	const {
 		root,
 		input,
@@ -48,21 +48,21 @@ Use the return values to construct a tags-input.
 
 ```svelte
 <script lang="ts">
-	import { createTagsInput } from '@melt-ui/svelte'
+	import { createTagsInput, melt } from '@melt-ui/svelte'
 
 	// This is a subset of return values
 	const { root, input, tags, tag, deleteTrigger, edit } = createTagsInput()
 </script>
 
-<div melt={$root}>
+<div use:melt={$root}>
 	{#each $tags as t}
-		<div melt={$tag(t)}>
+		<div use:melt={$tag(t)}>
 			<span>{t.value}</span>
-			<button melt={$deleteTrigger(t)}>x</button>
+			<button use:melt={$deleteTrigger(t)}>x</button>
 		</div>
-		<div melt={$edit(t)}>{t.value}</div>
+		<div use:melt={$edit(t)}>{t.value}</div>
 	{/each}
-	<input melt={$input} type="text" />
+	<input use:melt={$input} type="text" />
 </div>
 ```
 
diff --git a/src/docs/content/introduction.md b/src/docs/content/introduction.md
index 51f08fd5..64fad69b 100644
--- a/src/docs/content/introduction.md
+++ b/src/docs/content/introduction.md
@@ -27,13 +27,13 @@ element or component.
 
 ```svelte {3} /$root/#hi /$content/#hi /$trigger/#hi
 <script>
-	import { createCollapsible } from '@melt-ui/svelte'
+	import { createCollapsible, melt } from '@melt-ui/svelte'
 	const { open, root, content, trigger } = createCollapsible()
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
-	<div melt={$content}>Obi-Wan says: Hello there!</div>
+<div use:melt={$root}>
+	<button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
+	<div use:melt={$content}>Obi-Wan says: Hello there!</div>
 </div>
 ```
 
diff --git a/src/docs/content/preprocessor.md b/src/docs/content/preprocessor.md
index 6e1edb2d..254c3429 100644
--- a/src/docs/content/preprocessor.md
+++ b/src/docs/content/preprocessor.md
@@ -16,13 +16,13 @@ In the most simplest form, the PP will take the following code:
 
 ```svelte
 <script>
-	import { createCollapsible } from '@melt-ui/svelte'
+	import { createCollapsible, melt } from '@melt-ui/svelte'
 	const { open, root, content, trigger } = createCollapsible()
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
-	<div melt={$content}>Obi-Wan says: Hello there!</div>
+<div use:melt={$root}>
+	<button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
+	<div use:melt={$content}>Obi-Wan says: Hello there!</div>
 </div>
 ```
 
@@ -44,13 +44,13 @@ It can handle more complex scenarios, such as a builder that is a call expressio
 
 ```svelte
 <script>
-	import { createBuilder } from '@melt-ui/svelte'
+	import { createBuilder, melt } from '@melt-ui/svelte'
 	const { builder } = createBuilder()
 </script>
 
 {#each Array(100) as _, i}
 	<!-- Just a normal call expression -->
-	<div melt={$builder({ arg: i })} />
+	<div use:melt={$builder({ arg: i })} />
 {/each}
 ```
 
diff --git a/src/docs/content/transitions.md b/src/docs/content/transitions.md
index d27fc43a..db72c121 100644
--- a/src/docs/content/transitions.md
+++ b/src/docs/content/transitions.md
@@ -24,7 +24,7 @@ At a high level, here's how you could use the `forceVisible` prop with the Colla
 
 ```svelte {10,19,23} /transition:slide/#hi
 <script lang="ts">
-	import { createCollapsible } from '$lib/builders/collapsible';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -35,13 +35,13 @@ At a high level, here's how you could use the `forceVisible` prop with the Colla
     });
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger} aria-label="Toggle">
+<div use:melt={$root}>
+	<button use:melt={$trigger} aria-label="Toggle">
 		Open
 	</button>
     </div>
 	{#if $open}
-		<div melt={$content} transition:slide>
+		<div use:melt={$content} transition:slide>
 			Collapsible content
 		</div>
 	{/if}
diff --git a/src/docs/content/usage.md b/src/docs/content/usage.md
index 1988329d..f4e6cf9b 100644
--- a/src/docs/content/usage.md
+++ b/src/docs/content/usage.md
@@ -14,13 +14,13 @@ collapsible component using Melt UI's [Collapsible](/docs/builders/collapsible)
 
 ```svelte
 <script>
-	import { createCollapsible } from '@melt-ui/svelte'
+	import { createCollapsible, melt } from '@melt-ui/svelte'
 	const { open, root, content, trigger } = createCollapsible()
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
-	<div melt={$content}>Obi-Wan says: Hello there!</div>
+<div use:melt={$root}>
+	<button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
+	<div use:melt={$content}>Obi-Wan says: Hello there!</div>
 </div>
 ```
 
@@ -38,19 +38,19 @@ Melt's props, it's all good.
 
 ```svelte
 <script>
-  import { createCollapsible } from '@melt-ui/svelte';
+  import { createCollapsible, melt } from '@melt-ui/svelte';
   import Button from '$components/button.svelte';
   const { open, root, content, trigger } = createCollapsible();
 </script>
 
 <!-- Using Svelte Scoped Styles -->
-<div class="root" melt={$root}>
+<div class="root" use:melt={$root}>
 <!-- Using an external component -->
 <Button on:click={() => console.log('clicked')} {...$trigger} action={trigger}>
   {$open ? 'Close' : 'Open'}
 </Button>
 <!-- Using an utility class library, such as Tailwind -->
-<div class="rounded-md p-4 text-orange-500 shadow-sm" melt={$content}>
+<div class="rounded-md p-4 text-orange-500 shadow-sm" use:melt={$content}>
   Obi-Wan says: Hello there!
 </div>
 </div>
@@ -81,13 +81,13 @@ purposes, should you desire to do so.
 
 ```svelte
 <script>
-	import { createCollapsible } from '@melt-ui/svelte'
+	import { createCollapsible, melt } from '@melt-ui/svelte'
 	const { root, content, trigger } = createCollapsible()
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger}> Toggle </button>
-	<div class="content" melt={$content}>
+<div use:melt={$root}>
+	<button use:melt={$trigger}> Toggle </button>
+	<div class="content" use:melt={$content}>
 		<p>sveltejs/svelte</p>
 		<p>sveltejs/kit</p>
 	</div>
diff --git a/src/docs/info-popover.svelte b/src/docs/info-popover.svelte
new file mode 100644
index 00000000..da3e3db1
--- /dev/null
+++ b/src/docs/info-popover.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { cn } from '$docs/utils';
+	import { createPopover, melt } from '@melt-ui/svelte';
+	import { fade } from 'svelte/transition';
+	import { Info } from 'lucide-svelte';
+
+	const {
+		elements: { trigger, content, arrow },
+		states: { open },
+	} = createPopover();
+
+	export let iconClasses = '';
+	export let contentClasses = '';
+</script>
+
+<button use:melt={$trigger} aria-label="More info">
+	<Info class={cn('h-4 w-4 text-white', iconClasses)} />
+	<span class="sr-only">Open popover</span>
+</button>
+{#if $open}
+	<div
+		use:melt={$content}
+		transition:fade={{ duration: 100 }}
+		class={cn(
+			'mdsvex z-30 max-w-[300px] rounded-md bg-zinc-800 px-4 py-3 shadow-sm shadow-neutral-800',
+			contentClasses
+		)}
+	>
+		<div use:melt={$arrow} />
+		<p class="text-sm leading-5 text-white">
+			<slot />
+		</p>
+	</div>
+{/if}
+
+<style lang="postcss">
+	div {
+		@apply focus:ring-0 !important;
+	}
+</style>
diff --git a/src/docs/pp.js b/src/docs/pp.js
index 65bc1245..9d8c8fa9 100644
--- a/src/docs/pp.js
+++ b/src/docs/pp.js
@@ -11,10 +11,10 @@
  * @returns {MeltAttribute|null} - The builder and arguments of the melt attribute, or null if no melt attribute is found.
  */
 export function extractMeltAttribute(input) {
-	const meltStart = input.indexOf('melt={');
+	const meltStart = input.indexOf('use:melt={');
 	if (meltStart === -1) return null;
 
-	const substring = input.slice(meltStart + 6);
+	const substring = input.slice(meltStart + 10);
 	let balance = 1;
 	let index = 0;
 
@@ -55,7 +55,7 @@ export function processMeltAttributes(input) {
 	let tries = 0;
 	while (meltAttribute !== null && tries < 100000) {
 		tries++;
-		const oldMelt = `melt={$${
+		const oldMelt = `use:melt={$${
 			meltAttribute.args !== null
 				? `${meltAttribute.builder}(${meltAttribute.args})`
 				: meltAttribute.builder
diff --git a/src/docs/pp.spec.ts b/src/docs/pp.spec.ts
index a3baa3f7..ccf94ff6 100644
--- a/src/docs/pp.spec.ts
+++ b/src/docs/pp.spec.ts
@@ -2,14 +2,14 @@ import { test, expect } from 'vitest';
 import { extractMeltAttribute, processMeltAttributes } from './pp';
 
 const extractMeltAttributeCases = [
-	{ input: 'melt={$trigger(id)}', expected: { builder: 'trigger', args: 'id' } },
-	{ input: 'melt={$trigger}', expected: { builder: 'trigger', args: null } },
+	{ input: 'use:melt={$trigger(id)}', expected: { builder: 'trigger', args: 'id' } },
+	{ input: 'use:melt={$trigger}', expected: { builder: 'trigger', args: null } },
 	{
-		input: "melt={$trigger({helpme: 'god'} )}",
+		input: "use:melt={$trigger({helpme: 'god'} )}",
 		expected: { builder: 'trigger', args: "{helpme: 'god'} " },
 	},
 	{
-		input: "melt={$trigger({helpme: 'god'} )} awesome={coolio}",
+		input: "use:melt={$trigger({helpme: 'god'} )} awesome={coolio}",
 		expected: { builder: 'trigger', args: "{helpme: 'god'} " },
 	},
 ];
@@ -22,16 +22,16 @@ extractMeltAttributeCases.forEach(({ input, expected }) => {
 
 const processMeltAttributesCases = [
 	{
-		input: 'melt={$trigger(id)} awesome={coolio}',
+		input: 'use:melt={$trigger(id)} awesome={coolio}',
 		expected: '{...$trigger(id)} use:trigger awesome={coolio}',
 	},
-	{ input: 'melt={$trigger}', expected: '{...$trigger} use:trigger' },
+	{ input: 'use:melt={$trigger}', expected: '{...$trigger} use:trigger' },
 	{
-		input: "melt={$trigger({helpme: 'god'} )}",
+		input: "use:melt={$trigger({helpme: 'god'} )}",
 		expected: "{...$trigger({helpme: 'god'} )} use:trigger",
 	},
 	{
-		input: "melt={$trigger({helpme: 'god'} )} awesome={coolio}",
+		input: "use:melt={$trigger({helpme: 'god'} )} awesome={coolio}",
 		expected: "{...$trigger({helpme: 'god'} )} use:trigger awesome={coolio}",
 	},
 ];
diff --git a/src/docs/previews/accordion/disabled/css.svelte b/src/docs/previews/accordion/disabled/css.svelte
index 3662d001..64b958bd 100644
--- a/src/docs/previews/accordion/disabled/css.svelte
+++ b/src/docs/previews/accordion/disabled/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte';
+	import { createAccordion, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -30,16 +30,16 @@
 	];
 </script>
 
-<div class="root" melt={$root}>
+<div class="root" use:melt={$root}>
 	{#each items as { id, title, description, disabled }, i}
-		<div melt={$item(id)} class="item">
+		<div use:melt={$item(id)} class="item">
 			<h2>
-				<button melt={$trigger({ value: id, disabled })} class="trigger">
+				<button use:melt={$trigger({ value: id, disabled })} class="trigger">
 					{title}
 				</button>
 			</h2>
 			{#if $isSelected(id)}
-				<div class="content" melt={$content(id)} transition:slide>
+				<div class="content" use:melt={$content(id)} transition:slide>
 					<div>{description}</div>
 				</div>
 			{/if}
diff --git a/src/docs/previews/accordion/disabled/tailwind.svelte b/src/docs/previews/accordion/disabled/tailwind.svelte
index 9f09419e..727ea497 100644
--- a/src/docs/previews/accordion/disabled/tailwind.svelte
+++ b/src/docs/previews/accordion/disabled/tailwind.svelte
@@ -37,7 +37,6 @@
 >
 	{#each items as { id, title, description, disabled }, i}
 		<div
-			{...$item(id)}
 			use:melt={$item(id)}
 			class="overflow-hidden transition-colors first:rounded-t
             last:rounded-b focus-within:relative focus-within:z-10 focus-within:ring
@@ -45,11 +44,10 @@
 		>
 			<h2 class="flex">
 				<button
+					use:melt={$trigger({ value: id, disabled })}
 					on:m-click={() => {
 						console.log('m-click');
 					}}
-					use:melt={$trigger}
-					{...$trigger({ value: id, disabled })}
 					class="flex h-12 flex-1 cursor-pointer items-center justify-between border-b border-b-magnum-700
                  bg-white px-5 text-base font-medium
                  leading-none text-magnum-700 transition-colors hover:bg-opacity-95 focus:!ring-0
@@ -63,7 +61,7 @@
 			{#if $isSelected(id)}
 				<div
 					class="overflow-hidden bg-neutral-100 text-sm text-neutral-900"
-					melt={$content(id)}
+					use:melt={$content(id)}
 					transition:slide
 				>
 					<div class="px-5 py-4">
diff --git a/src/docs/previews/accordion/main/css.svelte b/src/docs/previews/accordion/main/css.svelte
index a730e9d5..a84a1332 100644
--- a/src/docs/previews/accordion/main/css.svelte
+++ b/src/docs/previews/accordion/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte';
+	import { createAccordion, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -28,16 +28,16 @@
 	];
 </script>
 
-<div class="root" melt={$root}>
+<div class="root" use:melt={$root}>
 	{#each items as { id, title, description }, i}
-		<div melt={$item(id)} class="item">
+		<div use:melt={$item(id)} class="item">
 			<h2>
-				<button melt={$trigger(id)} class="trigger">
+				<button use:melt={$trigger(id)} class="trigger">
 					{title}
 				</button>
 			</h2>
 			{#if $isSelected(id)}
-				<div class="content" melt={$content(id)} transition:slide>
+				<div class="content" use:melt={$content(id)} transition:slide>
 					<div>{description}</div>
 				</div>
 			{/if}
diff --git a/src/docs/previews/accordion/main/tailwind.svelte b/src/docs/previews/accordion/main/tailwind.svelte
index cbbdb4f2..ed0ecb74 100644
--- a/src/docs/previews/accordion/main/tailwind.svelte
+++ b/src/docs/previews/accordion/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte';
+	import { createAccordion, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -34,7 +34,7 @@
 >
 	{#each items as { id, title, description }, i}
 		<div
-			{...$item(id)}
+			use:melt={$item(id)}
 			class="overflow-hidden transition-colors first:rounded-t
             last:rounded-b focus-within:relative focus-within:z-10 focus-within:ring
             focus-within:ring-magnum-400"
@@ -42,10 +42,9 @@
 			<h2 class="flex">
 				<!-- TODO: Remove before merge (just for testing events) -->
 				<button
+					use:melt={$trigger(id)}
 					on:m-keydown={(e) => console.log(e)}
 					on:m-click={(e) => console.log(e)}
-					use:trigger
-					{...$trigger(id)}
 					class="flex h-12 flex-1 cursor-pointer items-center justify-between border-b border-b-magnum-700
                  bg-white px-5 text-base font-medium
                  leading-none text-magnum-700 transition-colors hover:bg-opacity-95 focus:!ring-0
@@ -57,8 +56,7 @@
 			{#if $isSelected(id)}
 				<div
 					class="overflow-hidden bg-neutral-100 text-sm text-neutral-900"
-					use:content
-					{...$content(id)}
+					use:melt={$content(id)}
 					transition:slide
 				>
 					<div class="px-5 py-4">
diff --git a/src/docs/previews/accordion/multiple/css.svelte b/src/docs/previews/accordion/multiple/css.svelte
index ba884efe..4f7679f6 100644
--- a/src/docs/previews/accordion/multiple/css.svelte
+++ b/src/docs/previews/accordion/multiple/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte';
+	import { createAccordion, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -30,16 +30,16 @@
 	];
 </script>
 
-<div class="root" melt={$root}>
+<div class="root" use:melt={$root}>
 	{#each items as { id, title, description }, i}
-		<div melt={$item(id)} class="item">
+		<div use:melt={$item(id)} class="item">
 			<h2>
-				<button melt={$trigger(id)} class="trigger">
+				<button use:melt={$trigger(id)} class="trigger">
 					{title}
 				</button>
 			</h2>
 			{#if $isSelected(id)}
-				<div class="content" melt={$content(id)} transition:slide>
+				<div class="content" use:melt={$content(id)} transition:slide>
 					<div>{description}</div>
 				</div>
 			{/if}
diff --git a/src/docs/previews/accordion/multiple/tailwind.svelte b/src/docs/previews/accordion/multiple/tailwind.svelte
index 5c6d0e00..60a38a39 100644
--- a/src/docs/previews/accordion/multiple/tailwind.svelte
+++ b/src/docs/previews/accordion/multiple/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion } from '@melt-ui/svelte';
+	import { createAccordion, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 
 	const {
@@ -36,14 +36,14 @@
 >
 	{#each items as { id, title, description }, i}
 		<div
-			melt={$item(id)}
+			use:melt={$item(id)}
 			class="overflow-hidden transition-colors first:rounded-t
             last:rounded-b focus-within:relative focus-within:z-10 focus-within:ring
             focus-within:ring-magnum-400"
 		>
 			<h2 class="flex">
 				<button
-					melt={$trigger(id)}
+					use:melt={$trigger(id)}
 					class="flex h-12 flex-1 cursor-pointer items-center justify-between border-b border-b-magnum-700
                  bg-white px-5 text-base font-medium
                  leading-none text-magnum-700 transition-colors hover:bg-opacity-95 focus:!ring-0
@@ -55,7 +55,7 @@
 			{#if $isSelected(id)}
 				<div
 					class="overflow-hidden bg-neutral-100 text-sm text-neutral-900"
-					melt={$content(id)}
+					use:melt={$content(id)}
 					transition:slide
 				>
 					<div class="px-5 py-4">
diff --git a/src/docs/previews/avatar/main/css.svelte b/src/docs/previews/avatar/main/css.svelte
index f93226d0..d2149567 100644
--- a/src/docs/previews/avatar/main/css.svelte
+++ b/src/docs/previews/avatar/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAvatar } from '@melt-ui/svelte';
+	import { createAvatar, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { image, fallback },
@@ -25,18 +25,18 @@
 
 <div class="root">
 	<div class="item">
-		<img melt={$image} alt="Avatar" class="avatar" />
-		<span melt={$fallback} class="fallback">RH</span>
+		<img use:melt={$image} alt="Avatar" class="avatar" />
+		<span use:melt={$fallback} class="fallback">RH</span>
 	</div>
 
 	<div class="item">
-		<img melt={$imageA} alt="Avatar" class="avatar" />
-		<span melt={$fallbackA} class="fallback">SH</span>
+		<img use:melt={$imageA} alt="Avatar" class="avatar" />
+		<span use:melt={$fallbackA} class="fallback">SH</span>
 	</div>
 
 	<div class="item">
-		<img melt={$imageB} alt="Avatar" class="avatar" />
-		<span melt={$fallbackB} class="fallback">UI</span>
+		<img use:melt={$imageB} alt="Avatar" class="avatar" />
+		<span use:melt={$fallbackB} class="fallback">UI</span>
 	</div>
 </div>
 
diff --git a/src/docs/previews/avatar/main/tailwind.svelte b/src/docs/previews/avatar/main/tailwind.svelte
index a6156902..a7754c0a 100644
--- a/src/docs/previews/avatar/main/tailwind.svelte
+++ b/src/docs/previews/avatar/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAvatar } from '@melt-ui/svelte';
+	import { createAvatar, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { image, fallback },
@@ -27,16 +27,25 @@
 	<div
 		class="flex h-16 w-16 items-center justify-center rounded-full bg-neutral-100"
 	>
-		<img melt={$image} alt="Avatar" class="h-full w-full rounded-[inherit]" />
-		<span melt={$fallback} class="text-3xl font-medium text-magnum-700">RH</span
+		<img
+			use:melt={$image}
+			alt="Avatar"
+			class="h-full w-full rounded-[inherit]"
+		/>
+		<span use:melt={$fallback} class="text-3xl font-medium text-magnum-700"
+			>RH</span
 		>
 	</div>
 
 	<div
 		class="flex h-16 w-16 items-center justify-center rounded-full bg-neutral-100"
 	>
-		<img melt={$imageA} alt="Avatar" class="h-full w-full rounded-[inherit]" />
-		<span melt={$fallbackA} class="text-3xl font-medium text-magnum-700"
+		<img
+			use:melt={$imageA}
+			alt="Avatar"
+			class="h-full w-full rounded-[inherit]"
+		/>
+		<span use:melt={$fallbackA} class="text-3xl font-medium text-magnum-700"
 			>SH</span
 		>
 	</div>
@@ -44,8 +53,12 @@
 	<div
 		class="flex h-16 w-16 items-center justify-center rounded-full bg-neutral-100"
 	>
-		<img melt={$imageB} alt="Avatar" class="h-full w-full rounded-[inherit]" />
-		<span melt={$fallbackB} class="text-3xl font-medium text-magnum-700"
+		<img
+			use:melt={$imageB}
+			alt="Avatar"
+			class="h-full w-full rounded-[inherit]"
+		/>
+		<span use:melt={$fallbackB} class="text-3xl font-medium text-magnum-700"
 			>UI</span
 		>
 	</div>
diff --git a/src/docs/previews/checkbox/main/css.svelte b/src/docs/previews/checkbox/main/css.svelte
index f9663b74..89e4a965 100644
--- a/src/docs/previews/checkbox/main/css.svelte
+++ b/src/docs/previews/checkbox/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCheckbox } from '$lib';
+	import { createCheckbox, melt } from '@melt-ui/svelte';
 	import { Check, Minus } from 'lucide-svelte';
 
 	const {
@@ -12,13 +12,13 @@
 
 <form>
 	<div>
-		<button melt={$root} id="checkbox">
+		<button use:melt={$root} id="checkbox">
 			{#if $isIndeterminate}
 				<Minus />
 			{:else if $isChecked}
 				<Check />
 			{/if}
-			<input melt={$input} />
+			<input use:melt={$input} />
 		</button>
 		<label for="checkbox"> Accept terms and conditions. </label>
 	</div>
diff --git a/src/docs/previews/checkbox/main/tailwind.svelte b/src/docs/previews/checkbox/main/tailwind.svelte
index f3d9c5a1..388ea54e 100644
--- a/src/docs/previews/checkbox/main/tailwind.svelte
+++ b/src/docs/previews/checkbox/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCheckbox } from '$lib';
+	import { createCheckbox, melt } from '@melt-ui/svelte';
 	import { Check, Minus } from 'lucide-svelte';
 
 	const {
@@ -13,10 +13,9 @@
 <form>
 	<div class="flex items-center justify-center">
 		<button
+			use:melt={$root}
 			on:m-click={() => console.log('clicked')}
 			on:m-keydown={() => console.log('keydown')}
-			use:root
-			{...$root}
 			class="flex h-6 w-6 appearance-none items-center justify-center
             rounded-sm bg-white text-magnum-600 shadow-lg hover:opacity-75"
 			id="checkbox"
@@ -26,7 +25,7 @@
 			{:else if $isChecked}
 				<Check />
 			{/if}
-			<input {...$input} />
+			<input use:melt={$input} />
 		</button>
 		<label class="pl-[15px] text-[15px] leading-none text-white" for="checkbox">
 			Accept terms and conditions.
diff --git a/src/docs/previews/collapsible/controlled/css.svelte b/src/docs/previews/collapsible/controlled/css.svelte
index d82ff8c3..f3998c0a 100644
--- a/src/docs/previews/collapsible/controlled/css.svelte
+++ b/src/docs/previews/collapsible/controlled/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCollapsible } from '$lib/builders/collapsible';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 	import { ChevronsUpDown, X } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
@@ -14,10 +14,10 @@
 	});
 </script>
 
-<div melt={$root} class="root">
+<div use:melt={$root} class="root">
 	<div class="header">
 		<span class="label"> @thomasglopes starred 3 repositories </span>
-		<button melt={$trigger}>
+		<button use:melt={$trigger}>
 			<div class="abs-center">
 				{#if $open}
 					<X />
@@ -33,7 +33,7 @@
 	</div>
 
 	{#if $open}
-		<div melt={$content} transition:slide>
+		<div use:melt={$content} transition:slide>
 			<div class="collapsible">
 				<div class="item">
 					<span>sveltejs/svelte</span>
diff --git a/src/docs/previews/collapsible/controlled/tailwind.svelte b/src/docs/previews/collapsible/controlled/tailwind.svelte
index 1f003ae8..cc5b1736 100644
--- a/src/docs/previews/collapsible/controlled/tailwind.svelte
+++ b/src/docs/previews/collapsible/controlled/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCollapsible } from '$lib/builders/collapsible';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 	import { ChevronsUpDown, X } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
@@ -14,13 +14,13 @@
 	});
 </script>
 
-<div melt={$root} class="mx-auto w-[18rem] max-w-full sm:w-[25rem]">
+<div use:melt={$root} class="mx-auto w-[18rem] max-w-full sm:w-[25rem]">
 	<div class="flex items-center justify-between">
 		<span class="text-sm leading-6 text-white">
 			@thomasglopes starred 3 repositories
 		</span>
 		<button
-			melt={$trigger}
+			use:melt={$trigger}
 			class="relative h-6 w-6 place-items-center rounded-full bg-white text-sm
             text-magnum-700 shadow-lg hover:opacity-75 data-[disabled]:cursor-not-allowed
             data-[disabled]:opacity-75"
@@ -42,7 +42,7 @@
 	</div>
 
 	{#if $open}
-		<div melt={$content} transition:slide>
+		<div use:melt={$content} transition:slide>
 			<div class="flex flex-col gap-2">
 				<div class="rounded bg-white p-3 shadow-lg">
 					<span class="text-base leading-[25px] text-magnum-800"
diff --git a/src/docs/previews/collapsible/main/css.svelte b/src/docs/previews/collapsible/main/css.svelte
index 9caa08e0..81186e81 100644
--- a/src/docs/previews/collapsible/main/css.svelte
+++ b/src/docs/previews/collapsible/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCollapsible } from '$lib/builders/collapsible';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 	import { ChevronsUpDown, X } from 'lucide-svelte';
 
@@ -9,10 +9,10 @@
 	} = createCollapsible();
 </script>
 
-<div melt={$root} class="root">
+<div use:melt={$root} class="root">
 	<div class="header">
 		<span class="label"> @thomasglopes starred 3 repositories </span>
-		<button melt={$trigger}>
+		<button use:melt={$trigger}>
 			<div class="abs-center">
 				{#if $open}
 					<X />
@@ -28,7 +28,7 @@
 	</div>
 
 	{#if $open}
-		<div melt={$content} transition:slide>
+		<div use:melt={$content} transition:slide>
 			<div class="collapsible">
 				<div class="item">
 					<span>sveltejs/svelte</span>
diff --git a/src/docs/previews/collapsible/main/tailwind.svelte b/src/docs/previews/collapsible/main/tailwind.svelte
index 8fe8bed0..44ec90db 100644
--- a/src/docs/previews/collapsible/main/tailwind.svelte
+++ b/src/docs/previews/collapsible/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCollapsible } from '$lib/builders/collapsible';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 	import { slide } from 'svelte/transition';
 	import { ChevronsUpDown, X } from 'lucide-svelte';
 
@@ -9,14 +9,13 @@
 	} = createCollapsible();
 </script>
 
-<div {...$root} class="mx-auto w-[18rem] max-w-full sm:w-[25rem]">
+<div use:melt={$root} class="mx-auto w-[18rem] max-w-full sm:w-[25rem]">
 	<div class="flex items-center justify-between">
 		<span class="text-sm leading-6 text-white">
 			@thomasglopes starred 3 repositories
 		</span>
 		<button
-			use:trigger
-			{...$trigger}
+			use:melt={$trigger}
 			on:m-click={() => console.log('clicked')}
 			class="relative h-6 w-6 place-items-center rounded-full bg-white text-sm
             text-magnum-700 shadow-lg hover:opacity-75 data-[disabled]:cursor-not-allowed
@@ -39,7 +38,7 @@
 	</div>
 
 	{#if $open}
-		<div melt={$content} transition:slide>
+		<div use:melt={$content} transition:slide>
 			<div class="flex flex-col gap-2">
 				<div class="rounded bg-white p-3 shadow-lg">
 					<span class="text-base leading-[25px] text-magnum-800"
diff --git a/src/docs/previews/combobox/controlled/css.svelte b/src/docs/previews/combobox/controlled/css.svelte
index a3eb1dba..2b347522 100644
--- a/src/docs/previews/combobox/controlled/css.svelte
+++ b/src/docs/previews/combobox/controlled/css.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { createCombobox, type ComboboxFilterFunction } from '@melt-ui/svelte';
+	import {
+		createCombobox,
+		type ComboboxFilterFunction,
+		melt,
+	} from '@melt-ui/svelte';
 	import { Check, ChevronDown, ChevronUp } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
 
@@ -91,7 +95,7 @@
 <label>
 	<span>Choose your favorite book:</span>
 	<div>
-		<input melt={$input} placeholder="Best book ever" value={$inputValue} />
+		<input use:melt={$input} placeholder="Best book ever" value={$inputValue} />
 		<div class="chevron-wrapper">
 			{#if $open}
 				<ChevronUp />
@@ -102,13 +106,13 @@
 	</div>
 </label>
 
-<div class="menu-container" melt={$menu}>
+<div class="menu-container" use:melt={$menu}>
 	<ul class="menu">
 		{#if $open}
 			{#if $filteredItems.length !== 0}
 				{#each $filteredItems as book, index (index)}
 					<li
-						melt={$item({
+						use:melt={$item({
 							index,
 							item: book,
 							disabled: book.disabled,
diff --git a/src/docs/previews/combobox/controlled/tailwind.svelte b/src/docs/previews/combobox/controlled/tailwind.svelte
index ef69b487..b70b26c6 100644
--- a/src/docs/previews/combobox/controlled/tailwind.svelte
+++ b/src/docs/previews/combobox/controlled/tailwind.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { createCombobox, type ComboboxFilterFunction } from '@melt-ui/svelte';
+	import {
+		createCombobox,
+		type ComboboxFilterFunction,
+		melt,
+	} from '@melt-ui/svelte';
 	import { Check, ChevronDown, ChevronUp } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
 
@@ -106,7 +110,7 @@
 	<span class="block pb-1 capitalize">Choose your favorite book:</span>
 	<div class="relative">
 		<input
-			melt={$input}
+			use:melt={$input}
 			class="flex h-10 items-center justify-between rounded-md bg-white
             px-3 pr-12 text-magnum-700"
 			placeholder="Best book ever"
@@ -124,7 +128,7 @@
 
 <ul
 	class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-md"
-	melt={$menu}
+	use:melt={$menu}
 >
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<div
@@ -135,7 +139,7 @@
 			{#if $filteredItems.length !== 0}
 				{#each $filteredItems as book, index (index)}
 					<li
-						melt={$item({
+						use:melt={$item({
 							index,
 							item: book,
 							disabled: book.disabled,
diff --git a/src/docs/previews/combobox/main/css.svelte b/src/docs/previews/combobox/main/css.svelte
index be939108..220dc013 100644
--- a/src/docs/previews/combobox/main/css.svelte
+++ b/src/docs/previews/combobox/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCombobox } from '@melt-ui/svelte';
+	import { createCombobox, melt } from '@melt-ui/svelte';
 	import { Check, ChevronDown, ChevronUp } from 'lucide-svelte';
 
 	interface Book {
@@ -81,10 +81,10 @@
 	});
 </script>
 
-<label melt={$label}>
+<label use:melt={$label}>
 	<span>Choose your favorite book:</span>
 	<div>
-		<input melt={$input} placeholder="Best book ever" value={$inputValue} />
+		<input use:melt={$input} placeholder="Best book ever" value={$inputValue} />
 		<div class="chevron-wrapper">
 			{#if $open}
 				<ChevronUp />
@@ -95,13 +95,13 @@
 	</div>
 </label>
 
-<div class="menu-container" melt={$menu}>
+<div class="menu-container" use:melt={$menu}>
 	<ul class="menu">
 		{#if $open}
 			{#if $filteredItems.length !== 0}
 				{#each $filteredItems as book, index (index)}
 					<li
-						melt={$item({
+						use:melt={$item({
 							index,
 							item: book,
 							disabled: book.disabled,
diff --git a/src/docs/previews/combobox/main/tailwind.svelte b/src/docs/previews/combobox/main/tailwind.svelte
index c7715888..503e9123 100644
--- a/src/docs/previews/combobox/main/tailwind.svelte
+++ b/src/docs/previews/combobox/main/tailwind.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { createCombobox, type ComboboxFilterFunction } from '@melt-ui/svelte';
+	import {
+		createCombobox,
+		type ComboboxFilterFunction,
+		melt,
+	} from '@melt-ui/svelte';
 	import { Check, ChevronDown, ChevronUp } from 'lucide-svelte';
 	import { slide } from 'svelte/transition';
 
@@ -87,13 +91,13 @@
 
 <div class="flex flex-col gap-1">
 	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label melt={$label}>
+	<label use:melt={$label}>
 		<span class="block capitalize">Choose your favorite book:</span>
 	</label>
 
 	<div class="relative">
 		<input
-			melt={$input}
+			use:melt={$input}
 			class="flex h-10 items-center justify-between rounded-md bg-white
 					px-3 pr-12 text-magnum-700"
 			placeholder="Best book ever"
@@ -111,7 +115,7 @@
 {#if $open}
 	<ul
 		class="z-10 flex max-h-[300px] flex-col overflow-hidden rounded-md"
-		melt={$menu}
+		use:melt={$menu}
 		transition:slide={{ duration: 150 }}
 	>
 		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -122,7 +126,7 @@
 			{#if $filteredItems.length !== 0}
 				{#each $filteredItems as book, index (index)}
 					<li
-						melt={$item({
+						use:melt={$item({
 							index,
 							item: book,
 							disabled: book.disabled,
diff --git a/src/docs/previews/context-menu/main/css.svelte b/src/docs/previews/context-menu/main/css.svelte
index f9d935a4..03bdb3b2 100644
--- a/src/docs/previews/context-menu/main/css.svelte
+++ b/src/docs/previews/context-menu/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createContextMenu } from '$lib';
+	import { createContextMenu, melt } from '@melt-ui/svelte';
 	import { writable } from 'svelte/store';
 	import { ChevronRight, Check } from 'lucide-svelte';
 
@@ -30,14 +30,14 @@
 	const hideMeltUI = writable(false);
 </script>
 
-<span class="trigger" melt={$trigger} aria-label="Update dimensions">
+<span class="trigger" use:melt={$trigger} aria-label="Update dimensions">
 	Right click me.
 </span>
 
-<div class="menu" melt={$menu}>
-	<div class="item" melt={$item}>About Melt UI</div>
-	<div class="item" melt={$item}>Check for Updates...</div>
-	<div class="separator" melt={$separator} />
+<div class="menu" use:melt={$menu}>
+	<div class="item" use:melt={$item}>About Melt UI</div>
+	<div class="item" use:melt={$item}>Check for Updates...</div>
+	<div class="separator" use:melt={$separator} />
 	<div
 		class="item"
 		{...$checkboxItem}
@@ -50,17 +50,17 @@
 		</div>
 		Settings Sync is On
 	</div>
-	<div class="item" melt={$subTriggerA}>
+	<div class="item" use:melt={$subTriggerA}>
 		Profiles
 		<div class="rightSlot">
 			<ChevronRight class="icon" />
 		</div>
 	</div>
-	<div class="menu subMenu" melt={$subMenuA}>
+	<div class="menu subMenu" use:melt={$subMenuA}>
 		<div class="text">People</div>
-		<div melt={$radioGroup}>
+		<div use:melt={$radioGroup}>
 			{#each personsArr as person}
-				<div class="item" melt={$radioItem({ value: person })}>
+				<div class="item" use:melt={$radioItem({ value: person })}>
 					<div class="check">
 						{#if $isChecked(person)}
 							<div class="dot" />
@@ -71,7 +71,7 @@
 			{/each}
 		</div>
 	</div>
-	<div melt={$separator} class="separator" />
+	<div use:melt={$separator} class="separator" />
 
 	<div
 		class="item"
@@ -86,12 +86,12 @@
 		Hide Melt UI
 		<div class="rightSlot">⌘H</div>
 	</div>
-	<div class="item" melt={$item} aria-disabled="true">
+	<div class="item" use:melt={$item} aria-disabled="true">
 		Show All Components
 		<div class="rightSlot">⇧⌘N</div>
 	</div>
-	<div melt={$separator} class="separator" />
-	<div class="item" melt={$item}>
+	<div use:melt={$separator} class="separator" />
+	<div class="item" use:melt={$item}>
 		Quit Melt UI
 		<div class="rightSlot">⌘Q</div>
 	</div>
diff --git a/src/docs/previews/context-menu/main/tailwind.svelte b/src/docs/previews/context-menu/main/tailwind.svelte
index cddb5a2b..403af850 100644
--- a/src/docs/previews/context-menu/main/tailwind.svelte
+++ b/src/docs/previews/context-menu/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createContextMenu } from '$lib';
+	import { createContextMenu, melt } from '@melt-ui/svelte';
 	import { writable } from 'svelte/store';
 	import { ChevronRight, Check } from 'lucide-svelte';
 
@@ -30,14 +30,14 @@
 	const hideMeltUI = writable(false);
 </script>
 
-<span class="trigger" melt={$trigger} aria-label="Update dimensions">
+<span class="trigger" use:melt={$trigger} aria-label="Update dimensions">
 	Right click me.
 </span>
 
-<div class="menu" melt={$menu}>
-	<div class="item" melt={$item}>About Melt UI</div>
-	<div class="item" melt={$item}>Check for Updates...</div>
-	<div class="separator" melt={$separator} />
+<div class="menu" use:melt={$menu}>
+	<div class="item" use:melt={$item}>About Melt UI</div>
+	<div class="item" use:melt={$item}>Check for Updates...</div>
+	<div class="separator" use:melt={$separator} />
 	<div
 		class="item"
 		{...$checkboxItem}
@@ -50,17 +50,17 @@
 		</div>
 		Settings Sync is On
 	</div>
-	<div class="item" melt={$subTriggerA}>
+	<div class="item" use:melt={$subTriggerA}>
 		Profiles
 		<div class="rightSlot">
 			<ChevronRight class="icon" />
 		</div>
 	</div>
-	<div class="menu subMenu" melt={$subMenuA}>
+	<div class="menu subMenu" use:melt={$subMenuA}>
 		<div class="text">People</div>
-		<div melt={$radioGroup}>
+		<div use:melt={$radioGroup}>
 			{#each personsArr as person}
-				<div class="item" melt={$radioItem({ value: person })}>
+				<div class="item" use:melt={$radioItem({ value: person })}>
 					<div class="check">
 						{#if $isChecked(person)}
 							<div class="dot" />
@@ -71,7 +71,7 @@
 			{/each}
 		</div>
 	</div>
-	<div melt={$separator} class="separator" />
+	<div use:melt={$separator} class="separator" />
 
 	<div
 		class="item"
@@ -86,12 +86,12 @@
 		Hide Melt UI
 		<div class="rightSlot">⌘H</div>
 	</div>
-	<div class="item" melt={$item} aria-disabled="true">
+	<div class="item" use:melt={$item} aria-disabled="true">
 		Show All Components
 		<div class="rightSlot">⇧⌘N</div>
 	</div>
-	<div melt={$separator} class="separator" />
-	<div class="item" melt={$item}>
+	<div use:melt={$separator} class="separator" />
+	<div class="item" use:melt={$item}>
 		Quit Melt UI
 		<div class="rightSlot">⌘Q</div>
 	</div>
diff --git a/src/docs/previews/dialog/alert/css.svelte b/src/docs/previews/dialog/alert/css.svelte
index f525d8af..843440cf 100644
--- a/src/docs/previews/dialog/alert/css.svelte
+++ b/src/docs/previews/dialog/alert/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -12,9 +12,9 @@
 	});
 </script>
 
-<button melt={$trigger} class="trigger"> Delete Item </button>
+<button use:melt={$trigger} class="trigger"> Delete Item </button>
 {#if $open}
-	<div melt={$overlay} class="overlay" />
+	<div use:melt={$overlay} class="overlay" />
 	<div
 		class="content"
 		transition:flyAndScale={{
@@ -22,20 +22,22 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="title">Are you sure you want to delete this?</h2>
-		<p melt={$description} class="description">
+		<h2 use:melt={$title} class="title">
+			Are you sure you want to delete this?
+		</h2>
+		<p use:melt={$description} class="description">
 			This action cannot be undone. This will permanently delete the item and
 			remove it from our servers.
 		</p>
 
 		<div class="actions">
-			<button melt={$close} class="secondary"> Cancel </button>
-			<button melt={$close} class="primary"> Continue </button>
+			<button use:melt={$close} class="secondary"> Cancel </button>
+			<button use:melt={$close} class="primary"> Continue </button>
 		</div>
 
-		<button melt={$close} aria-label="Close" class="close">
+		<button use:melt={$close} aria-label="Close" class="close">
 			<X />
 		</button>
 	</div>
diff --git a/src/docs/previews/dialog/alert/tailwind.svelte b/src/docs/previews/dialog/alert/tailwind.svelte
index 6d74c48c..16ca33f9 100644
--- a/src/docs/previews/dialog/alert/tailwind.svelte
+++ b/src/docs/previews/dialog/alert/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -13,14 +13,14 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
     font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
 >
 	Delete Item
 </button>
 {#if $open}
-	<div melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
+	<div use:melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
 	<div
 		class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw]
             max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-white
@@ -30,26 +30,26 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="m-0 text-lg font-medium text-black">
+		<h2 use:melt={$title} class="m-0 text-lg font-medium text-black">
 			Are you sure you want to delete this?
 		</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			This action cannot be undone. This will permanently delete the item and
 			remove it from our servers.
 		</p>
 
 		<div class="mt-6 flex justify-end gap-4">
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-zinc-100 px-4 font-medium leading-none text-zinc-600"
 			>
 				Cancel
 			</button>
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-magnum-100 px-4 font-medium leading-none text-magnum-900"
 			>
@@ -58,7 +58,7 @@
 		</div>
 
 		<button
-			melt={$close}
+			use:melt={$close}
 			aria-label="Close"
 			class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-800
diff --git a/src/docs/previews/dialog/controlled/css.svelte b/src/docs/previews/dialog/controlled/css.svelte
index 9ed369c6..bb9254ee 100644
--- a/src/docs/previews/dialog/controlled/css.svelte
+++ b/src/docs/previews/dialog/controlled/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -15,9 +15,9 @@
 	});
 </script>
 
-<button melt={$trigger} class="trigger"> Open Dialog </button>
+<button use:melt={$trigger} class="trigger"> Open Dialog </button>
 {#if $open}
-	<div melt={$overlay} class="overlay" />
+	<div use:melt={$overlay} class="overlay" />
 	<div
 		class="content"
 		transition:flyAndScale={{
@@ -25,10 +25,10 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="title">Edit profile</h2>
-		<p melt={$description} class="description">
+		<h2 use:melt={$title} class="title">Edit profile</h2>
+		<p use:melt={$description} class="description">
 			Make changes to your profile here. Click save when you're done.
 		</p>
 
@@ -41,11 +41,11 @@
 			<input id="username" value="@thomasglopes" />
 		</fieldset>
 		<div class="actions">
-			<button melt={$close} class="secondary"> Cancel </button>
-			<button melt={$close} class="primary"> Save changes </button>
+			<button use:melt={$close} class="secondary"> Cancel </button>
+			<button use:melt={$close} class="primary"> Save changes </button>
 		</div>
 
-		<button melt={$close} aria-label="close" class="close">
+		<button use:melt={$close} aria-label="close" class="close">
 			<X />
 		</button>
 	</div>
diff --git a/src/docs/previews/dialog/controlled/tailwind.svelte b/src/docs/previews/dialog/controlled/tailwind.svelte
index eb9e4da2..83bad49d 100644
--- a/src/docs/previews/dialog/controlled/tailwind.svelte
+++ b/src/docs/previews/dialog/controlled/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -16,14 +16,14 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
     font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
 >
 	Open Dialog
 </button>
 {#if $open}
-	<div melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
+	<div use:melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
 	<div
 		class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw]
             max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-white
@@ -33,12 +33,12 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="m-0 text-lg font-medium text-black">
+		<h2 use:melt={$title} class="m-0 text-lg font-medium text-black">
 			Edit profile
 		</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			Make changes to your profile here. Click save when you're done.
 		</p>
 
@@ -66,14 +66,14 @@
 		</fieldset>
 		<div class="mt-6 flex justify-end gap-4">
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-zinc-100 px-4 font-medium leading-none text-zinc-600"
 			>
 				Cancel
 			</button>
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-magnum-100 px-4 font-medium leading-none text-magnum-900"
 			>
@@ -82,7 +82,7 @@
 		</div>
 
 		<button
-			melt={$close}
+			use:melt={$close}
 			aria-label="close"
 			class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-800
diff --git a/src/docs/previews/dialog/drawer/css.svelte b/src/docs/previews/dialog/drawer/css.svelte
index a0638233..ce29acaf 100644
--- a/src/docs/previews/dialog/drawer/css.svelte
+++ b/src/docs/previews/dialog/drawer/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '$lib/builders/dialog';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { fade, fly } from 'svelte/transition';
 	// Internal helpers
 	import { X } from 'lucide-svelte';
@@ -10,11 +10,15 @@
 	} = createDialog();
 </script>
 
-<button melt={$trigger} class="trigger"> View Notifications </button>
+<button use:melt={$trigger} class="trigger"> View Notifications </button>
 {#if $open}
-	<div melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
 	<div
-		melt={$content}
+		use:melt={$overlay}
+		class="overlay"
+		transition:fade={{ duration: 150 }}
+	/>
+	<div
+		use:melt={$content}
 		class="content"
 		transition:fly={{
 			x: -350,
@@ -22,11 +26,11 @@
 			opacity: 1,
 		}}
 	>
-		<button melt={$close} aria-label="Close" class="close">
+		<button use:melt={$close} aria-label="Close" class="close">
 			<X />
 		</button>
-		<h2 melt={$title} class="title">Notifications</h2>
-		<p melt={$description} class="description">
+		<h2 use:melt={$title} class="title">Notifications</h2>
+		<p use:melt={$description} class="description">
 			Check out your latest updates.
 		</p>
 		<section>
diff --git a/src/docs/previews/dialog/drawer/tailwind.svelte b/src/docs/previews/dialog/drawer/tailwind.svelte
index cc5a9398..6d6fd238 100644
--- a/src/docs/previews/dialog/drawer/tailwind.svelte
+++ b/src/docs/previews/dialog/drawer/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '$lib/builders/dialog';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { fade, fly } from 'svelte/transition';
 	// Internal helpers
 	import { X } from 'lucide-svelte';
@@ -11,7 +11,7 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2 font-medium
     leading-none text-magnum-700 shadow-lg hover:opacity-75 focus:outline-none focus:ring
     focus:ring-magnum-400"
@@ -20,12 +20,12 @@
 </button>
 {#if $open}
 	<div
-		melt={$overlay}
+		use:melt={$overlay}
 		class="fixed inset-0 z-20 bg-black/50"
 		transition:fade={{ duration: 150 }}
 	/>
 	<div
-		melt={$content}
+		use:melt={$content}
 		class="fixed left-0 top-0 z-50 h-screen w-full max-w-[350px] bg-white p-6
             shadow-lg focus:outline-none"
 		transition:fly={{
@@ -35,7 +35,7 @@
 		}}
 	>
 		<button
-			melt={$close}
+			use:melt={$close}
 			aria-label="Close"
 			class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-800
@@ -44,10 +44,10 @@
 		>
 			<X />
 		</button>
-		<h2 melt={$title} class="mb-0 text-lg font-medium text-black">
+		<h2 use:melt={$title} class="mb-0 text-lg font-medium text-black">
 			Notifications
 		</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			Check out your latest updates.
 		</p>
 		<section>
diff --git a/src/docs/previews/dialog/main/css.svelte b/src/docs/previews/dialog/main/css.svelte
index d47c8714..9d7526ff 100644
--- a/src/docs/previews/dialog/main/css.svelte
+++ b/src/docs/previews/dialog/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -10,9 +10,9 @@
 	} = createDialog();
 </script>
 
-<button melt={$trigger} class="trigger"> Open Dialog </button>
+<button use:melt={$trigger} class="trigger"> Open Dialog </button>
 {#if $open}
-	<div melt={$overlay} class="overlay" />
+	<div use:melt={$overlay} class="overlay" />
 	<div
 		class="content"
 		transition:flyAndScale={{
@@ -20,10 +20,10 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="title">Edit profile</h2>
-		<p melt={$description} class="description">
+		<h2 use:melt={$title} class="title">Edit profile</h2>
+		<p use:melt={$description} class="description">
 			Make changes to your profile here. Click save when you're done.
 		</p>
 
@@ -36,11 +36,11 @@
 			<input id="username" value="@thomasglopes" />
 		</fieldset>
 		<div class="actions">
-			<button melt={$close} class="secondary"> Cancel </button>
-			<button melt={$close} class="primary"> Save changes </button>
+			<button use:melt={$close} class="secondary"> Cancel </button>
+			<button use:melt={$close} class="primary"> Save changes </button>
 		</div>
 
-		<button melt={$close} aria-label="close" class="close">
+		<button use:melt={$close} aria-label="close" class="close">
 			<X />
 		</button>
 	</div>
diff --git a/src/docs/previews/dialog/main/tailwind.svelte b/src/docs/previews/dialog/main/tailwind.svelte
index fa0f1bc2..9cdac55f 100644
--- a/src/docs/previews/dialog/main/tailwind.svelte
+++ b/src/docs/previews/dialog/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -11,14 +11,14 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
     font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
 >
 	Open Dialog
 </button>
 {#if $open}
-	<div melt={$overlay} class="fixed inset-0 z-20 bg-black/50" />
+	<div use:melt={$overlay} class="fixed inset-0 z-20 bg-black/50" />
 	<div
 		class="fixed left-[50%] top-[50%] z-30 max-h-[85vh] w-[90vw]
             max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-white
@@ -28,12 +28,12 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="m-0 text-lg font-medium text-black">
+		<h2 use:melt={$title} class="m-0 text-lg font-medium text-black">
 			Edit profile
 		</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			Make changes to your profile here. Click save when you're done.
 		</p>
 
@@ -61,14 +61,14 @@
 		</fieldset>
 		<div class="mt-6 flex justify-end gap-4">
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-zinc-100 px-4 font-medium leading-none text-zinc-600"
 			>
 				Cancel
 			</button>
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-magnum-100 px-4 font-medium leading-none text-magnum-900"
 			>
@@ -76,7 +76,7 @@
 			</button>
 		</div>
 		<button
-			melt={$close}
+			use:melt={$close}
 			aria-label="close"
 			class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-800
diff --git a/src/docs/previews/dialog/nested/tailwind.svelte b/src/docs/previews/dialog/nested/tailwind.svelte
index 18fb3a97..763132b1 100644
--- a/src/docs/previews/dialog/nested/tailwind.svelte
+++ b/src/docs/previews/dialog/nested/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { flyAndScale } from '$docs/utils';
 	import { X } from 'lucide-svelte';
@@ -23,14 +23,14 @@
 </script>
 
 <button
-	melt={$trigger}
+	use:melt={$trigger}
 	class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
     font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
 >
 	Open Dialog
 </button>
 {#if $open}
-	<div melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
+	<div use:melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
 	<div
 		class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw]
             max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-white
@@ -40,25 +40,25 @@
 			y: 8,
 			start: 0.96,
 		}}
-		melt={$content}
+		use:melt={$content}
 	>
-		<h2 melt={$title} class="m-0 text-lg font-medium text-black">
+		<h2 use:melt={$title} class="m-0 text-lg font-medium text-black">
 			First dialog
 		</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			This is the first dialog. It contains a trigger to open a second dialog.
 		</p>
 
 		<div class="mt-6 flex justify-end gap-4">
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-zinc-100 px-4 font-medium leading-none text-zinc-600"
 			>
 				Cancel
 			</button>
 			<button
-				melt={$triggerNested}
+				use:melt={$triggerNested}
 				class="inline-flex h-8 items-center justify-center rounded-[4px]
                     bg-magnum-100 px-4 font-medium leading-none text-magnum-900"
 			>
@@ -66,7 +66,7 @@
 			</button>
 		</div>
 		{#if $openNested}
-			<div melt={$overlayNested} class="fixed inset-0 z-40 bg-black/75" />
+			<div use:melt={$overlayNested} class="fixed inset-0 z-40 bg-black/75" />
 			<div
 				class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw]
                         max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-white
@@ -76,13 +76,13 @@
 					y: 8,
 					start: 0.96,
 				}}
-				melt={$contentNested}
+				use:melt={$contentNested}
 			>
-				<h2 melt={$titleNested} class="m-0 text-lg font-medium text-black">
+				<h2 use:melt={$titleNested} class="m-0 text-lg font-medium text-black">
 					Second dialog
 				</h2>
 				<p
-					melt={$descriptionNested}
+					use:melt={$descriptionNested}
 					class="mb-5 mt-2 leading-normal text-zinc-600"
 				>
 					This is the second dialog.
@@ -90,7 +90,7 @@
 
 				<div class="mt-6 flex justify-end gap-4">
 					<button
-						melt={$closeNested}
+						use:melt={$closeNested}
 						class="inline-flex h-8 items-center justify-center rounded-[4px]
                                 bg-zinc-100 px-4 font-medium leading-none text-zinc-600"
 					>
@@ -99,7 +99,7 @@
 				</div>
 
 				<button
-					melt={$closeNested}
+					use:melt={$closeNested}
 					class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                             appearance-none items-center justify-center rounded-full text-magnum-800
                             hover:bg-magnum-100 focus:shadow-magnum-400"
@@ -110,7 +110,7 @@
 		{/if}
 	</div>
 	<button
-		melt={$close}
+		use:melt={$close}
 		class="absolute right-[10px] top-[10px] inline-flex h-6 w-6
                 appearance-none items-center justify-center rounded-full text-magnum-800
                 hover:bg-magnum-100 focus:shadow-magnum-400"
diff --git a/src/docs/previews/dropdown-menu/main/tailwind.svelte b/src/docs/previews/dropdown-menu/main/tailwind.svelte
index 0a7caf5c..7876ce4c 100644
--- a/src/docs/previews/dropdown-menu/main/tailwind.svelte
+++ b/src/docs/previews/dropdown-menu/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDropdownMenu } from '$lib';
+	import { createDropdownMenu, melt } from '@melt-ui/svelte';
 	import { writable } from 'svelte/store';
 	import { AlignJustify, ChevronRight, Check } from 'lucide-svelte';
 	import { fly } from 'svelte/transition';
@@ -40,7 +40,7 @@
 <button
 	type="button"
 	class="trigger"
-	melt={$trigger}
+	use:melt={$trigger}
 	aria-label="Update dimensions"
 >
 	<AlignJustify class="h-4 w-4" />
@@ -48,10 +48,10 @@
 </button>
 
 {#if $open}
-	<div class="menu" melt={$menu} transition:fly={{ duration: 150, y: -10 }}>
-		<div class="item" melt={$item}>About Melt UI</div>
-		<div class="item" melt={$item}>Check for Updates...</div>
-		<div class="separator" melt={$separator} />
+	<div class="menu" use:melt={$menu} transition:fly={{ duration: 150, y: -10 }}>
+		<div class="item" use:melt={$item}>About Melt UI</div>
+		<div class="item" use:melt={$item}>Check for Updates...</div>
+		<div class="separator" use:melt={$separator} />
 		<div
 			class="item"
 			{...$checkboxItem}
@@ -64,7 +64,7 @@
 			</div>
 			Settings Sync is On
 		</div>
-		<div class="item" melt={$subTrigger}>
+		<div class="item" use:melt={$subTrigger}>
 			Profiles
 			<div class="rightSlot">
 				<ChevronRight class="icon" />
@@ -73,13 +73,13 @@
 		{#if $subOpen}
 			<div
 				class="menu subMenu"
-				melt={$subMenu}
+				use:melt={$subMenu}
 				transition:fly={{ x: -50, duration: 150 }}
 			>
 				<div class="text">People</div>
-				<div melt={$radioGroup}>
+				<div use:melt={$radioGroup}>
 					{#each personsArr as person}
-						<div class="item" melt={$radioItem({ value: person })}>
+						<div class="item" use:melt={$radioItem({ value: person })}>
 							<div class="check">
 								{#if $isChecked(person)}
 									<div class="dot" />
@@ -91,7 +91,7 @@
 				</div>
 			</div>
 		{/if}
-		<div melt={$separator} class="separator" />
+		<div use:melt={$separator} class="separator" />
 
 		<div
 			class="item"
@@ -106,16 +106,16 @@
 			Hide Melt UI
 			<div class="rightSlot">⌘H</div>
 		</div>
-		<div class="item" melt={$item} aria-disabled="true">
+		<div class="item" use:melt={$item} aria-disabled="true">
 			Show All Components
 			<div class="rightSlot">⇧⌘N</div>
 		</div>
-		<div melt={$separator} class="separator" />
-		<div class="item" melt={$item}>
+		<div use:melt={$separator} class="separator" />
+		<div class="item" use:melt={$item}>
 			Quit Melt UI
 			<div class="rightSlot">⌘Q</div>
 		</div>
-		<div melt={$arrow} />
+		<div use:melt={$arrow} />
 	</div>
 {/if}
 
diff --git a/src/docs/previews/hover-card/main/tailwind.svelte b/src/docs/previews/hover-card/main/tailwind.svelte
index c513e958..d9c5f4f4 100644
--- a/src/docs/previews/hover-card/main/tailwind.svelte
+++ b/src/docs/previews/hover-card/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createHoverCard } from '@melt-ui/svelte';
+	import { createHoverCard, melt } from '@melt-ui/svelte';
 	import { fly } from 'svelte/transition';
 
 	const {
@@ -15,7 +15,7 @@
 	href="https://github.com/melt-ui/melt-ui"
 	target="_blank"
 	rel="noreferrer"
-	melt={$trigger}
+	use:melt={$trigger}
 >
 	<img
 		src="/logo-mark.svg"
@@ -27,7 +27,7 @@
 
 {#if $open}
 	<div
-		melt={$content}
+		use:melt={$content}
 		transition:fly={{ y: -5, duration: 100 }}
 		class="z-10 rounded-md bg-white shadow-sm"
 	>
@@ -60,7 +60,7 @@
 				</div>
 			</div>
 		</div>
-		<div melt={$arrow} />
+		<div use:melt={$arrow} />
 	</div>
 {/if}
 
diff --git a/src/docs/previews/menubar/main/tailwind.svelte b/src/docs/previews/menubar/main/tailwind.svelte
index ed510f9d..3ff7fec7 100644
--- a/src/docs/previews/menubar/main/tailwind.svelte
+++ b/src/docs/previews/menubar/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createMenubar } from '@melt-ui/svelte';
+	import { createMenubar, melt } from '@melt-ui/svelte';
 	import { writable } from 'svelte/store';
 	import { ChevronRight, Check } from 'lucide-svelte';
 
@@ -66,40 +66,40 @@
 	const stickyScroll = writable(false);
 </script>
 
-<div class="flex rounded-md bg-white p-1 shadow-md" melt={$menubar}>
+<div class="flex rounded-md bg-white p-1 shadow-md" use:melt={$menubar}>
 	<!------------>
 	<!--- FILE --->
 	<!------------>
 	<button
 		type="button"
 		class="trigger"
-		melt={$trigger}
+		use:melt={$trigger}
 		aria-label="Update dimensions"
 	>
 		File
 	</button>
 
-	<div class="menu" melt={$menu}>
-		<div class="item" melt={$item}>New Text File</div>
-		<div class="item" melt={$item}>
+	<div class="menu" use:melt={$menu}>
+		<div class="item" use:melt={$item}>New Text File</div>
+		<div class="item" use:melt={$item}>
 			New File...
 			<div class="rightSlot">⌘T</div>
 		</div>
-		<div class="item" melt={$item} aria-disabled="true">
+		<div class="item" use:melt={$item} aria-disabled="true">
 			New Window...
 			<div class="rightSlot">⇧⌘T</div>
 		</div>
-		<div class="separator" melt={$separator} />
-		<div class="item" melt={$subTrigger}>
+		<div class="separator" use:melt={$separator} />
+		<div class="item" use:melt={$subTrigger}>
 			Select theme
 			<div class="rightSlot">
 				<ChevronRight class="icon" />
 			</div>
 		</div>
-		<div class="menu subMenu" melt={$subMenu}>
-			<div melt={$radioGroup}>
+		<div class="menu subMenu" use:melt={$subMenu}>
+			<div use:melt={$radioGroup}>
 				{#each themesArr as theme}
-					<div class="item" melt={$radioItem({ value: theme })}>
+					<div class="item" use:melt={$radioItem({ value: theme })}>
 						<div class="check">
 							{#if $isChecked(theme)}
 								<div class="dot" />
@@ -110,8 +110,8 @@
 				{/each}
 			</div>
 		</div>
-		<div melt={$separator} class="separator" />
-		<div class="item" melt={$item}>
+		<div use:melt={$separator} class="separator" />
+		<div class="item" use:melt={$item}>
 			Quit Melt UI
 			<div class="rightSlot">⌘Q</div>
 		</div>
@@ -123,42 +123,42 @@
 	<button
 		type="button"
 		class="trigger"
-		melt={$triggerA}
+		use:melt={$triggerA}
 		aria-label="Update dimensions"
 	>
 		Edit
 	</button>
 
-	<div class="menu" melt={$menuA}>
-		<div class="item" melt={$itemA}>
+	<div class="menu" use:melt={$menuA}>
+		<div class="item" use:melt={$itemA}>
 			Undo
 			<div class="rightSlot">⌘Z</div>
 		</div>
-		<div class="item" melt={$itemA}>
+		<div class="item" use:melt={$itemA}>
 			Redo
 			<div class="rightSlot">⇧⌘Z</div>
 		</div>
-		<div class="separator" melt={$separatorA} />
-		<div class="item" melt={$itemA}>
+		<div class="separator" use:melt={$separatorA} />
+		<div class="item" use:melt={$itemA}>
 			Cut
 			<div class="rightSlot">⌘X</div>
 		</div>
-		<div class="item" melt={$itemA}>
+		<div class="item" use:melt={$itemA}>
 			Copy
 			<div class="rightSlot">⌘C</div>
 		</div>
-		<div class="item" melt={$itemA}>
+		<div class="item" use:melt={$itemA}>
 			Paste
 			<div class="rightSlot">⌘V</div>
 		</div>
 
-		<div melt={$separatorA} class="separator" />
+		<div use:melt={$separatorA} class="separator" />
 
-		<div class="item" melt={$itemA}>
+		<div class="item" use:melt={$itemA}>
 			Find
 			<div class="rightSlot">⌘F</div>
 		</div>
-		<div class="item" melt={$itemA}>
+		<div class="item" use:melt={$itemA}>
 			Replace
 			<div class="rightSlot">⌥⌘F</div>
 		</div>
@@ -170,32 +170,32 @@
 	<button
 		type="button"
 		class="trigger"
-		melt={$triggerB}
+		use:melt={$triggerB}
 		aria-label="Update dimensions"
 	>
 		View
 	</button>
 
-	<div class="menu" melt={$menuB}>
-		<div class="item" melt={$itemB}>
+	<div class="menu" use:melt={$menuB}>
+		<div class="item" use:melt={$itemB}>
 			Command Palette..
 			<div class="rightSlot">⇧⌘P</div>
 		</div>
-		<div class="item" melt={$itemB}>Open View...</div>
-		<div class="separator" melt={$separatorB} />
-		<div class="item" melt={$subTriggerB}>
+		<div class="item" use:melt={$itemB}>Open View...</div>
+		<div class="separator" use:melt={$separatorB} />
+		<div class="item" use:melt={$subTriggerB}>
 			Appearance
 			<div class="rightSlot">
 				<ChevronRight class="icon" />
 			</div>
 		</div>
-		<div class="menu subMenu" melt={$subMenuB}>
-			<div melt={$radioGroup}>
-				<div class="item" melt={$itemB}>Full Screen</div>
-				<div class="item" melt={$itemB}>Zen Mode</div>
+		<div class="menu subMenu" use:melt={$subMenuB}>
+			<div use:melt={$radioGroup}>
+				<div class="item" use:melt={$itemB}>Full Screen</div>
+				<div class="item" use:melt={$itemB}>Zen Mode</div>
 			</div>
 		</div>
-		<div class="separator" melt={$separatorB} />
+		<div class="separator" use:melt={$separatorB} />
 
 		<div
 			class="item"
@@ -232,16 +232,16 @@
 	<button
 		type="button"
 		class="trigger"
-		melt={$triggerC}
+		use:melt={$triggerC}
 		aria-label="Update dimensions"
 	>
 		Help
 	</button>
 
-	<div class="menu" melt={$menuC}>
-		<div class="item" melt={$itemC}>About Melt UI</div>
-		<div class="item" melt={$itemC}>Check for Updates...</div>
-		<div class="separator" melt={$separatorC} />
+	<div class="menu" use:melt={$menuC}>
+		<div class="item" use:melt={$itemC}>About Melt UI</div>
+		<div class="item" use:melt={$itemC}>Check for Updates...</div>
+		<div class="separator" use:melt={$separatorC} />
 		<div
 			class="item"
 			{...$checkboxItemC}
@@ -257,7 +257,7 @@
 			Tips & Tricks
 		</div>
 
-		<div melt={$separatorC} class="separator" />
+		<div use:melt={$separatorC} class="separator" />
 
 		<div
 			class="item"
@@ -271,12 +271,12 @@
 			</div>
 			Documentation
 		</div>
-		<div class="item" melt={$itemC} aria-disabled="true">
+		<div class="item" use:melt={$itemC} aria-disabled="true">
 			Show All Components
 			<div class="rightSlot">⇧⌘N</div>
 		</div>
-		<div melt={$separatorC} class="separator" />
-		<div class="item" melt={$itemC}>Report a bug...</div>
+		<div use:melt={$separatorC} class="separator" />
+		<div class="item" use:melt={$itemC}>Report a bug...</div>
 	</div>
 </div>
 
diff --git a/src/docs/previews/pagination/main/css.svelte b/src/docs/previews/pagination/main/css.svelte
index ad1444e1..cd06d756 100644
--- a/src/docs/previews/pagination/main/css.svelte
+++ b/src/docs/previews/pagination/main/css.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPagination } from '@melt-ui/svelte';
+	import { createPagination, melt } from '@melt-ui/svelte';
 	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 
 	const {
@@ -13,20 +13,20 @@
 	});
 </script>
 
-<nav aria-label="pagination" melt={$root}>
+<nav aria-label="pagination" use:melt={$root}>
 	<p class="text-center">
 		Showing items {$range.start} - {$range.end}
 	</p>
 	<div class="buttons">
-		<button melt={$prevButton}><ChevronLeft /></button>
+		<button use:melt={$prevButton}><ChevronLeft /></button>
 		{#each $pages as page (page.key)}
 			{#if page.type === 'ellipsis'}
 				<span>...</span>
 			{:else}
-				<button melt={$pageTrigger(page)}>{page.value}</button>
+				<button use:melt={$pageTrigger(page)}>{page.value}</button>
 			{/if}
 		{/each}
-		<button melt={$nextButton}><ChevronRight /></button>
+		<button use:melt={$nextButton}><ChevronRight /></button>
 	</div>
 </nav>
 
diff --git a/src/docs/previews/pagination/main/tailwind.svelte b/src/docs/previews/pagination/main/tailwind.svelte
index 765c8b8b..30d389d3 100644
--- a/src/docs/previews/pagination/main/tailwind.svelte
+++ b/src/docs/previews/pagination/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPagination } from '@melt-ui/svelte';
+	import { createPagination, melt } from '@melt-ui/svelte';
 	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 
 	const {
@@ -16,7 +16,7 @@
 <nav
 	class="flex flex-col items-center gap-4"
 	aria-label="pagination"
-	melt={$root}
+	use:melt={$root}
 >
 	<p class="text-center">
 		Showing items {$range.start} - {$range.end}
@@ -26,7 +26,7 @@
 			class="grid h-8 items-center rounded-sm bg-white px-3 text-sm text-magnum-700 shadow-sm
 			hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-50 data-[selected]:bg-magnum-900
 			data-[selected]:text-white"
-			melt={$prevButton}><ChevronLeft /></button
+			use:melt={$prevButton}><ChevronLeft /></button
 		>
 		{#each $pages as page (page.key)}
 			{#if page.type === 'ellipsis'}
@@ -36,7 +36,7 @@
 					class="grid h-8 items-center rounded-sm bg-white px-3 text-sm text-magnum-700 shadow-sm
 					hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-50 data-[selected]:bg-magnum-900
 				data-[selected]:text-white"
-					melt={$pageTrigger(page)}>{page.value}</button
+					use:melt={$pageTrigger(page)}>{page.value}</button
 				>
 			{/if}
 		{/each}
@@ -44,7 +44,7 @@
 			class="grid h-8 items-center rounded-sm bg-white px-3 text-sm text-magnum-700 shadow-sm
 			hover:opacity-75 disabled:cursor-not-allowed disabled:opacity-50 data-[selected]:bg-magnum-900
 		data-[selected]:text-white"
-			melt={$nextButton}><ChevronRight /></button
+			use:melt={$nextButton}><ChevronRight /></button
 		>
 	</div>
 </nav>
diff --git a/src/docs/previews/pin-input/main/tailwind.svelte b/src/docs/previews/pin-input/main/tailwind.svelte
index afd8b15e..04825a78 100644
--- a/src/docs/previews/pin-input/main/tailwind.svelte
+++ b/src/docs/previews/pin-input/main/tailwind.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { createPinInput } from '@melt-ui/svelte';
+	import { createPinInput, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, input },
 	} = createPinInput();
 </script>
 
-<div melt={$root} class="flex items-center gap-2">
+<div use:melt={$root} class="flex items-center gap-2">
 	{#each Array.from({ length: 5 }) as _, i}
 		<input
 			class="rounded-md bg-white text-center text-lg text-magnum-900 shadow-sm square-12"
-			melt={$input}
+			use:melt={$input}
 		/>
 	{/each}
 </div>
diff --git a/src/docs/previews/popover/main/tailwind.svelte b/src/docs/previews/popover/main/tailwind.svelte
index ea432545..af4e184f 100644
--- a/src/docs/previews/popover/main/tailwind.svelte
+++ b/src/docs/previews/popover/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
+	import { createPopover, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { Settings2, X } from 'lucide-svelte';
 
@@ -12,7 +12,7 @@
 <button
 	type="button"
 	class="trigger"
-	melt={$trigger}
+	use:melt={$trigger}
 	aria-label="Update dimensions"
 >
 	<Settings2 class="h-4 w-4" />
@@ -20,8 +20,8 @@
 </button>
 
 {#if $open}
-	<div melt={$content} transition:fade={{ duration: 100 }} class="content">
-		<div melt={$arrow} />
+	<div use:melt={$content} transition:fade={{ duration: 100 }} class="content">
+		<div use:melt={$arrow} />
 		<div class="flex flex-col gap-2.5">
 			<p>Dimensions</p>
 			<fieldset>
@@ -41,7 +41,7 @@
 				<input type="number" id="weight" class="input" placeholder="Weight" />
 			</fieldset>
 		</div>
-		<button class="close" melt={$close}>
+		<button class="close" use:melt={$close}>
 			<X class="h-4 w-4 " />
 		</button>
 	</div>
diff --git a/src/docs/previews/popover/nested/tailwind.svelte b/src/docs/previews/popover/nested/tailwind.svelte
index f7b886db..04f8d411 100644
--- a/src/docs/previews/popover/nested/tailwind.svelte
+++ b/src/docs/previews/popover/nested/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
+	import { createPopover, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { Settings2, X } from 'lucide-svelte';
 
@@ -26,7 +26,7 @@
 <button
 	type="button"
 	class="trigger"
-	melt={$trigger}
+	use:melt={$trigger}
 	aria-label="Update dimensions"
 >
 	<Settings2 class="h-4 w-4" />
@@ -35,16 +35,16 @@
 
 {#if $open}
 	<div
-		melt={$content}
+		use:melt={$content}
 		transition:fade={{ duration: 100 }}
 		class="z-10 rounded-[4px] bg-white p-5 shadow-md"
 	>
-		<div melt={$arrow} />
+		<div use:melt={$arrow} />
 		<div class="flex flex-col gap-2.5 p-4">
 			<button
 				type="button"
 				class="inline-flex items-center justify-center rounded-md border bg-white px-4 py-2 font-medium leading-none text-magnum-700 shadow-lg transition-colors hover:bg-magnum-100"
-				melt={$triggerA}
+				use:melt={$triggerA}
 				aria-label="Change settings"
 			>
 				Open Nested
@@ -52,11 +52,11 @@
 
 			{#if $openA}
 				<div
-					melt={$contentA}
+					use:melt={$contentA}
 					transition:fade={{ duration: 100 }}
 					class=" z-20 w-64 rounded-md bg-neutral-900 p-5 text-white shadow-lg"
 				>
-					<div melt={$arrowA} />
+					<div use:melt={$arrowA} />
 					<div class="flex flex-col gap-2 px-4 py-2">
 						<p class="mb-2 font-medium text-magnum-500">Dimensions</p>
 						<fieldset>
@@ -104,13 +104,13 @@
 							/>
 						</fieldset>
 					</div>
-					<button class="close" melt={$closeA}>
+					<button class="close" use:melt={$closeA}>
 						<X class="h-4 w-4 " />
 					</button>
 				</div>
 			{/if}
 		</div>
-		<button class="close" melt={$close}>
+		<button class="close" use:melt={$close}>
 			<X class="h-4 w-4 " />
 		</button>
 	</div>
diff --git a/src/docs/previews/progress/main/tailwind.svelte b/src/docs/previews/progress/main/tailwind.svelte
index 15b4e461..e21e8ecc 100644
--- a/src/docs/previews/progress/main/tailwind.svelte
+++ b/src/docs/previews/progress/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createProgress } from '@melt-ui/svelte';
+	import { createProgress, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root },
@@ -18,7 +18,7 @@
 </script>
 
 <div
-	melt={$root}
+	use:melt={$root}
 	class="relative h-6 w-[300px] overflow-hidden rounded-[99999px] bg-black/40"
 >
 	<div
diff --git a/src/docs/previews/radio-group/main/tailwind.svelte b/src/docs/previews/radio-group/main/tailwind.svelte
index 5995e8ae..5586e5d7 100644
--- a/src/docs/previews/radio-group/main/tailwind.svelte
+++ b/src/docs/previews/radio-group/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createRadioGroup } from '@melt-ui/svelte';
+	import { createRadioGroup, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, item },
@@ -12,14 +12,14 @@
 </script>
 
 <div
-	melt={$root}
+	use:melt={$root}
 	class="flex flex-col gap-3 data-[orientation=horizontal]:flex-row"
 	aria-label="View density"
 >
 	{#each optionsArr as option}
 		<div class="flex items-center gap-3">
 			<button
-				melt={$item(option)}
+				use:melt={$item(option)}
 				class="grid h-6 w-6 cursor-default place-items-center rounded-full bg-white shadow-sm
 			hover:bg-magnum-100"
 				id={option}
diff --git a/src/docs/previews/select/main/tailwind.svelte b/src/docs/previews/select/main/tailwind.svelte
index 5cb86af7..3afe50e0 100644
--- a/src/docs/previews/select/main/tailwind.svelte
+++ b/src/docs/previews/select/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSelect } from '@melt-ui/svelte';
+	import { createSelect, melt } from '@melt-ui/svelte';
 	import { Check, ChevronDown } from 'lucide-svelte';
 	import { fly } from 'svelte/transition';
 
@@ -19,11 +19,11 @@
 
 <div class="flex flex-col gap-1">
 	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
-	<label class="block" melt={$label}>Favorite Flavor</label>
+	<label class="block" use:melt={$label}>Favorite Flavor</label>
 	<button
 		class="flex h-10 min-w-[220px] items-center justify-between rounded-md bg-white px-3
 	py-2 text-magnum-700 transition-opacity hover:opacity-90"
-		melt={$trigger}
+		use:melt={$trigger}
 		aria-label="Food"
 	>
 		{$valueLabel || 'Select a flavor'}
@@ -34,14 +34,14 @@
 			class="z-10 flex max-h-[360px] flex-col
 		overflow-y-auto rounded-md bg-white
 		p-1 focus:!ring-0"
-			melt={$menu}
+			use:melt={$menu}
 			transition:fly={{ duration: 100, y: -5 }}
 		>
 			{#each Object.entries(options) as [key, arr]}
-				<div melt={$group(key)}>
+				<div use:melt={$group(key)}>
 					<div
 						class="py-1 pl-4 pr-4 font-semibold capitalize text-neutral-800"
-						melt={$groupLabel(key)}
+						use:melt={$groupLabel(key)}
 					>
 						{key}
 					</div>
@@ -51,7 +51,7 @@
 						focus:z-10 focus:text-magnum-700
 					data-[highlighted]:bg-magnum-50 data-[selected]:bg-magnum-100
 					data-[highlighted]:text-magnum-900 data-[selected]:text-magnum-900"
-							melt={$option({ value: item, label: item })}
+							use:melt={$option({ value: item, label: item })}
 						>
 							{#if $isSelected(item)}
 								<div class="check">
diff --git a/src/docs/previews/separator/main/css.svelte b/src/docs/previews/separator/main/css.svelte
index acafe1dd..2d32f87d 100644
--- a/src/docs/previews/separator/main/css.svelte
+++ b/src/docs/previews/separator/main/css.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { createSeparator, type CreateSeparatorProps } from '@melt-ui/svelte';
+	import {
+		createSeparator,
+		melt,
+		type CreateSeparatorProps,
+	} from '@melt-ui/svelte';
 
 	export let orientation: CreateSeparatorProps['orientation'] = 'vertical';
 
@@ -21,12 +25,12 @@
 
 <h2>Melt UI</h2>
 <p>Flavors for everyone</p>
-<div melt={$horizontal} class="separator separator--horizontal" />
+<div use:melt={$horizontal} class="separator separator--horizontal" />
 <div class="ice-creams">
 	{#each icecreams as icecream, i}
 		<p>{icecream}</p>
 		{#if i !== icecreams.length - 1}
-			<div melt={$vertical} class="separator separator--vertical" />
+			<div use:melt={$vertical} class="separator separator--vertical" />
 		{/if}
 	{/each}
 </div>
diff --git a/src/docs/previews/separator/main/tailwind.svelte b/src/docs/previews/separator/main/tailwind.svelte
index b3a6c6ee..3b8e345b 100644
--- a/src/docs/previews/separator/main/tailwind.svelte
+++ b/src/docs/previews/separator/main/tailwind.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { createSeparator, type CreateSeparatorProps } from '@melt-ui/svelte';
+	import {
+		createSeparator,
+		melt,
+		type CreateSeparatorProps,
+	} from '@melt-ui/svelte';
 
 	export let orientation: CreateSeparatorProps['orientation'] = 'vertical';
 
@@ -22,12 +26,12 @@
 <div>
 	<h2 class="font-bold">Melt UI</h2>
 	<p>Flavors for everyone</p>
-	<div melt={$horizontal} class="my-3.5 h-[1px] w-full bg-white" />
+	<div use:melt={$horizontal} class="my-3.5 h-[1px] w-full bg-white" />
 	<div class="flex items-center space-x-3.5">
 		{#each icecreams as icecream, i}
 			<p>{icecream}</p>
 			{#if i !== icecreams.length - 1}
-				<div melt={$vertical} class="h-4 w-[1px] bg-white" />
+				<div use:melt={$vertical} class="h-4 w-[1px] bg-white" />
 			{/if}
 		{/each}
 	</div>
diff --git a/src/docs/previews/slider/main/tailwind.svelte b/src/docs/previews/slider/main/tailwind.svelte
index 0ab146ce..e8dbb04b 100644
--- a/src/docs/previews/slider/main/tailwind.svelte
+++ b/src/docs/previews/slider/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSlider } from '@melt-ui/svelte';
+	import { createSlider, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, range, thumb },
@@ -9,12 +9,12 @@
 	});
 </script>
 
-<span melt={$root} class="relative flex h-[20px] w-[200px] items-center">
+<span use:melt={$root} class="relative flex h-[20px] w-[200px] items-center">
 	<span class="block h-[3px] w-full bg-black/40">
-		<span melt={$range} class="h-[3px] bg-white" />
+		<span use:melt={$range} class="h-[3px] bg-white" />
 	</span>
 	<span
-		melt={$thumb}
+		use:melt={$thumb()}
 		class="block h-5 w-5 rounded-full bg-white focus:ring-4 focus:ring-black/40"
 	/>
 </span>
diff --git a/src/docs/previews/slider/range/tailwind.svelte b/src/docs/previews/slider/range/tailwind.svelte
index 57b006b5..28d39bd7 100644
--- a/src/docs/previews/slider/range/tailwind.svelte
+++ b/src/docs/previews/slider/range/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSlider } from '@melt-ui/svelte';
+	import { createSlider, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, range, thumb },
@@ -10,14 +10,14 @@
 	});
 </script>
 
-<span melt={$root} class="relative flex h-[20px] w-[200px] items-center">
+<span use:melt={$root} class="relative flex h-[20px] w-[200px] items-center">
 	<span class="block h-[3px] w-full bg-black/40">
-		<span melt={$range} class="h-[3px] bg-white" />
+		<span use:melt={$range} class="h-[3px] bg-white" />
 	</span>
 
-	{#each { length: $value.length } as _}
+	{#each $value as _}
 		<span
-			melt={$thumb}
+			use:melt={$thumb()}
 			class="block h-5 w-5 rounded-full bg-white focus:ring-4 focus:ring-black/40"
 		/>
 	{/each}
diff --git a/src/docs/previews/slider/vertical/tailwind.svelte b/src/docs/previews/slider/vertical/tailwind.svelte
index 27f595bf..8f4b924c 100644
--- a/src/docs/previews/slider/vertical/tailwind.svelte
+++ b/src/docs/previews/slider/vertical/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSlider } from '@melt-ui/svelte';
+	import { createSlider, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, range, thumb },
@@ -11,14 +11,14 @@
 </script>
 
 <span
-	melt={$root}
+	use:melt={$root}
 	class="relative flex h-[200px] w-[3px] flex-col items-center"
 >
 	<span class="block h-[200px] w-full bg-black/40">
-		<span melt={$range} class="w-full bg-white" />
+		<span use:melt={$range} class="w-full bg-white" />
 	</span>
 	<span
-		melt={$thumb}
+		use:melt={$thumb()}
 		class="block h-5 w-5 rounded-full bg-white focus:ring-4 focus:ring-black/40"
 	/>
 </span>
diff --git a/src/docs/previews/switch/main/tailwind.svelte b/src/docs/previews/switch/main/tailwind.svelte
index 4560599b..0daa3ce3 100644
--- a/src/docs/previews/switch/main/tailwind.svelte
+++ b/src/docs/previews/switch/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSwitch } from '@melt-ui/svelte';
+	import { createSwitch, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, input },
@@ -13,7 +13,7 @@
 			Airplane mode
 		</label>
 		<button
-			melt={$root}
+			use:melt={$root}
 			class="relative h-6 w-11 cursor-default rounded-full bg-magnum-800 transition-colors data-[state=checked]:bg-magnum-950"
 			id="airplane-mode"
 		>
@@ -22,7 +22,7 @@
                 transition-transform will-change-transform
                 {$isChecked && 'translate-x-[22px]'}"
 			/>
-			<input melt={$input} />
+			<input use:melt={$input} />
 		</button>
 	</div>
 </form>
diff --git a/src/docs/previews/tabs/main/tailwind.svelte b/src/docs/previews/tabs/main/tailwind.svelte
index 51a8a2c0..810690a7 100644
--- a/src/docs/previews/tabs/main/tailwind.svelte
+++ b/src/docs/previews/tabs/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createTabs } from '@melt-ui/svelte';
+	import { createTabs, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { root, list, content, trigger },
@@ -9,21 +9,21 @@
 </script>
 
 <div
-	melt={$root}
+	use:melt={$root}
 	class="flex max-w-[25rem] flex-col overflow-hidden rounded-md shadow-lg
 	data-[orientation=vertical]:flex-row"
 >
 	<div
-		melt={$list}
+		use:melt={$list}
 		class="flex shrink-0 overflow-x-auto border-b border-magnum-100 bg-white
 		data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r"
 		aria-label="Manage your account"
 	>
-		<button melt={$trigger('tab1')} class="trigger">Account</button>
-		<button melt={$trigger('tab2')} class="trigger">Password</button>
-		<button melt={$trigger('tab3')} class="trigger">Settings</button>
+		<button use:melt={$trigger('tab1')} class="trigger">Account</button>
+		<button use:melt={$trigger('tab2')} class="trigger">Password</button>
+		<button use:melt={$trigger('tab3')} class="trigger">Settings</button>
 	</div>
-	<div melt={$content('tab1')} class="grow bg-white p-5">
+	<div use:melt={$content('tab1')} class="grow bg-white p-5">
 		<p class="mb-5 leading-normal text-magnum-950">
 			Make changes to your account here. Click save when you're done.
 		</p>
@@ -41,7 +41,7 @@
 			<button class="save">Save changes</button>
 		</div>
 	</div>
-	<div melt={$content('tab2')} class="grow bg-white p-5">
+	<div use:melt={$content('tab2')} class="grow bg-white p-5">
 		<p class="mb-5 leading-normal text-magnum-950">
 			Change your password here. Click save when you're done.
 		</p>
@@ -58,7 +58,7 @@
 			<button class="save">Save changes</button>
 		</div>
 	</div>
-	<div melt={$content('tab3')} class="grow bg-white p-5">
+	<div use:melt={$content('tab3')} class="grow bg-white p-5">
 		<p class="mb-5 leading-normal text-magnum-950">
 			Change your settings here. Click save when you're done.
 		</p>
diff --git a/src/docs/previews/tags-input/main/tailwind.svelte b/src/docs/previews/tags-input/main/tailwind.svelte
index 18c12223..89960e58 100644
--- a/src/docs/previews/tags-input/main/tailwind.svelte
+++ b/src/docs/previews/tags-input/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createTagsInput } from '@melt-ui/svelte';
+	import { createTagsInput, melt } from '@melt-ui/svelte';
 	import { X } from 'lucide-svelte';
 
 	const {
@@ -13,13 +13,13 @@
 
 <div class="flex flex-col items-start justify-center gap-2">
 	<div
-		melt={$root}
+		use:melt={$root}
 		class="flex min-w-[280px] flex-row flex-wrap gap-2.5 rounded-md bg-white px-3 py-2 text-magnum-700
 		focus-within:ring focus-within:ring-magnum-400"
 	>
 		{#each $tags as t}
 			<div
-				melt={$tag(t)}
+				use:melt={$tag(t)}
 				class="flex items-center overflow-hidden rounded-md bg-magnum-200 text-magnum-900 [word-break:break-word]
 			data-[disabled]:bg-magnum-300 data-[selected]:bg-magnum-400 data-[disabled]:hover:cursor-default
 				data-[disabled]:focus:!outline-none data-[disabled]:focus:!ring-0"
@@ -28,20 +28,20 @@
 					>{t.value}</span
 				>
 				<button
-					melt={$deleteTrigger(t)}
+					use:melt={$deleteTrigger(t)}
 					class="flex h-full items-center px-1 enabled:hover:bg-magnum-300"
 				>
 					<X class="h-3 w-3" />
 				</button>
 			</div>
 			<div
-				melt={$edit(t)}
+				use:melt={$edit(t)}
 				class="flex items-center overflow-hidden rounded-md px-1.5 [word-break:break-word] data-[invalid-edit]:focus:!ring-red-500"
 			/>
 		{/each}
 
 		<input
-			melt={$input}
+			use:melt={$input}
 			type="text"
 			placeholder="Enter tags..."
 			class="min-w-[4.5rem] shrink grow basis-0 border-0 text-black outline-none focus:!ring-0 data-[invalid]:text-red-500"
diff --git a/src/docs/previews/toast/main/tailwind.svelte b/src/docs/previews/toast/main/tailwind.svelte
index edb505a3..9dee50a8 100644
--- a/src/docs/previews/toast/main/tailwind.svelte
+++ b/src/docs/previews/toast/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createToaster } from '@melt-ui/svelte';
+	import { createToaster, melt } from '@melt-ui/svelte';
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
 	import { X } from 'lucide-svelte';
@@ -54,7 +54,7 @@
 >
 	{#each $toasts as { id, data } (id)}
 		<div
-			melt={$content(id)}
+			use:melt={$content(id)}
 			animate:flip={{ duration: 500 }}
 			in:fly={{ duration: 150, x: '100%' }}
 			out:fly={{ duration: 150, x: '100%' }}
@@ -64,16 +64,19 @@
 				class="relative flex w-[24rem] max-w-[calc(100vw-2rem)] items-center justify-between gap-4 p-5"
 			>
 				<div>
-					<h3 melt={$title(id)} class="flex items-center gap-2 font-semibold">
+					<h3
+						use:melt={$title(id)}
+						class="flex items-center gap-2 font-semibold"
+					>
 						{data.title}
 						<span class="rounded-full square-1.5 {data.color}" />
 					</h3>
-					<div melt={$description(id)}>
+					<div use:melt={$description(id)}>
 						{data.description}
 					</div>
 				</div>
 				<button
-					melt={$close(id)}
+					use:melt={$close(id)}
 					class="absolute right-4 top-4 grid place-items-center rounded-full text-magnum-500 square-6
 					hover:bg-magnum-900/50"
 				>
diff --git a/src/docs/previews/toggle-group/main/tailwind.svelte b/src/docs/previews/toggle-group/main/tailwind.svelte
index 2cccdc16..a06d86f9 100644
--- a/src/docs/previews/toggle-group/main/tailwind.svelte
+++ b/src/docs/previews/toggle-group/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createToggleGroup } from '@melt-ui/svelte';
+	import { createToggleGroup, melt } from '@melt-ui/svelte';
 	import { AlignCenter, AlignLeft, AlignRight } from 'lucide-svelte';
 
 	const {
@@ -10,21 +10,29 @@
 </script>
 
 <div
-	melt={$root}
+	use:melt={$root}
 	class="flex items-center data-[orientation='vertical']:flex-col"
 	aria-label="Text alignment"
 >
-	<button class="toggle-item" melt={$item('left')} aria-label="Left aligned">
+	<button
+		class="toggle-item"
+		use:melt={$item('left')}
+		aria-label="Left aligned"
+	>
 		<AlignLeft />
 	</button>
 	<button
 		class="toggle-item"
-		melt={$item('center')}
+		use:melt={$item('center')}
 		aria-label="Center aligned"
 	>
 		<AlignCenter />
 	</button>
-	<button class="toggle-item" melt={$item('right')} aria-label="Right aligned">
+	<button
+		class="toggle-item"
+		use:melt={$item('right')}
+		aria-label="Right aligned"
+	>
 		<AlignRight />
 	</button>
 </div>
diff --git a/src/docs/previews/toggle/main/tailwind.svelte b/src/docs/previews/toggle/main/tailwind.svelte
index b6fb828d..9fab9d41 100644
--- a/src/docs/previews/toggle/main/tailwind.svelte
+++ b/src/docs/previews/toggle/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createToggle } from '@melt-ui/svelte';
+	import { createToggle, melt } from '@melt-ui/svelte';
 	import { Italic } from 'lucide-svelte';
 
 	const {
@@ -8,7 +8,7 @@
 </script>
 
 <button
-	melt={$root}
+	use:melt={$root}
 	aria-label="Toggle italic"
 	class="grid h-9 w-9 place-items-center items-center justify-center rounded
 	bg-white text-base leading-4 text-magnum-800 shadow-lg hover:bg-magnum-100
diff --git a/src/docs/previews/toolbar/main/tailwind.svelte b/src/docs/previews/toolbar/main/tailwind.svelte
index 78001ba8..0871bdc7 100644
--- a/src/docs/previews/toolbar/main/tailwind.svelte
+++ b/src/docs/previews/toolbar/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createToolbar } from '@melt-ui/svelte';
+	import { createToolbar, melt } from '@melt-ui/svelte';
 
 	// Icons
 	import {
@@ -26,39 +26,39 @@
 </script>
 
 <div
-	melt={$root}
+	use:melt={$root}
 	class="flex min-w-max items-center gap-4 rounded-md bg-white px-3 py-3 text-neutral-700 shadow-sm lg:w-[35rem]"
 >
-	<div class="flex items-center gap-1" melt={$fontGroup}>
-		<button class="item" melt={$fontItem('bold')}>
+	<div class="flex items-center gap-1" use:melt={$fontGroup}>
+		<button class="item" use:melt={$fontItem('bold')}>
 			<Bold />
 		</button>
-		<button class="item" melt={$fontItem('italic')}>
+		<button class="item" use:melt={$fontItem('italic')}>
 			<Italic />
 		</button>
-		<button class="item" melt={$fontItem('strikethrough')}>
+		<button class="item" use:melt={$fontItem('strikethrough')}>
 			<Strikethrough />
 		</button>
 	</div>
-	<div class="separator" melt={$separator} />
-	<div class="flex items-center gap-1" melt={$alignGroup}>
-		<button class="item" melt={$alignItem('left')}>
+	<div class="separator" use:melt={$separator} />
+	<div class="flex items-center gap-1" use:melt={$alignGroup}>
+		<button class="item" use:melt={$alignItem('left')}>
 			<AlignLeft />
 		</button>
-		<button class="item" melt={$alignItem('center')}>
+		<button class="item" use:melt={$alignItem('center')}>
 			<AlignCenter />
 		</button>
-		<button class="item" melt={$alignItem('right')}>
+		<button class="item" use:melt={$alignItem('right')}>
 			<AlignRight />
 		</button>
 	</div>
-	<div class="separator" melt={$separator} />
-	<a href="/" class="link nowrap flex-shrink-0" melt={$link}>
+	<div class="separator" use:melt={$separator} />
+	<a href="/" class="link nowrap flex-shrink-0" use:melt={$link}>
 		Edited 2 hours ago
 	</a>
 	<button
 		class="ml-auto rounded-md bg-magnum-600 px-3 py-1 font-medium text-magnum-100 hover:opacity-75 active:opacity-50"
-		melt={$button}>Save</button
+		use:melt={$button}>Save</button
 	>
 </div>
 
diff --git a/src/docs/previews/tooltip/main/tailwind.svelte b/src/docs/previews/tooltip/main/tailwind.svelte
index 4c9ccb15..991a3a14 100644
--- a/src/docs/previews/tooltip/main/tailwind.svelte
+++ b/src/docs/previews/tooltip/main/tailwind.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createTooltip } from '@melt-ui/svelte';
+	import { createTooltip, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { Plus } from 'lucide-svelte';
 
@@ -15,17 +15,17 @@
 	});
 </script>
 
-<button type="button" class="trigger" melt={$trigger} aria-label="Add">
+<button type="button" class="trigger" use:melt={$trigger} aria-label="Add">
 	<Plus class="h-4 w-4" aria-label="plus" />
 </button>
 
 {#if $open}
 	<div
-		melt={$content}
+		use:melt={$content}
 		transition:fade={{ duration: 100 }}
 		class="z-10 rounded-md bg-white shadow-sm"
 	>
-		<div melt={$arrow} />
+		<div use:melt={$arrow} />
 		<p class="px-4 py-1 text-magnum-700">Add item to library</p>
 	</div>
 {/if}
diff --git a/src/lib/internal/actions/melt/index.ts b/src/lib/internal/actions/melt/index.ts
index bc5b8a54..f51cdea3 100644
--- a/src/lib/internal/actions/melt/index.ts
+++ b/src/lib/internal/actions/melt/index.ts
@@ -1,35 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Action, ActionReturn } from 'svelte/action';
 
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace svelteHTML {
-		interface HTMLAttributes<T> extends HTMLAttributes<T> {
-			/**
-			 * A special attribute for Melt UI's preprocessor `@melt-ui/pp`.
-			 *
-			 * @see https://www.melt-ui.com/docs/preprocessor
-			 *
-			 * @example
-			 * ```svelte
-			 * <script>
-			 * 	const { builder } = createBuilder();
-			 * </script>
-			 *
-			 * <div melt={$builder} />
-			 * ```
-			 */
-			melt?: Record<string, any> & { action: Action<any, any> };
-		}
-	}
-}
-
-type SomeBuilder<
-	E = HTMLElement,
-	P = never,
-	A extends Record<string, any> = Record<never, any>
-> = Record<string, any> & {
-	action: Action<E, P, A>;
+type SomeBuilder<Element, Param, Attributes extends Record<string, any>> = Record<string, any> & {
+	action: Action<Element, Param, Attributes>;
 };
 
 type GetActionAttributes<Builder> = Builder extends Record<string, any> & {
@@ -38,11 +11,27 @@ type GetActionAttributes<Builder> = Builder extends Record<string, any> & {
 	? Attr
 	: never;
 
+/**
+ * A special action for Melt UI's preprocessor `@melt-ui/pp`.
+ *
+ * @see https://www.melt-ui.com/docs/preprocessor
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * 	const { builder, melt } = createBuilder();
+ * </script>
+ *
+ * <div use:melt={$builder} />
+ * ```
+ */
 export function melt<
-	Builder extends SomeBuilder,
+	Builder extends SomeBuilder<Element, Param, A>,
 	Element extends HTMLElement,
-	Attributes extends GetActionAttributes<Builder>
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	Attributes extends GetActionAttributes<Builder>,
+	A extends Record<string, any>,
+	Param = never
 >(node: Element, params: Builder): ActionReturn<Builder, Attributes> {
-	return params.action(node) as ActionReturn<Builder, Attributes>;
+	// @ts-expect-error calls the action for debugging purposes
+	return params.action(node);
 }
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index afc43341..723b3dc3 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -4,7 +4,7 @@
 	import type { SvelteComponent } from 'svelte';
 	import type { PageData } from './$types';
 	import { cn } from '$docs/utils';
-	import { createSeparator } from '$lib';
+	import { createSeparator, melt } from '$lib';
 	import { page } from '$app/stores';
 
 	const {
@@ -33,7 +33,7 @@
 		<div class="mdsvex" id="mdsvex">
 			<svelte:component this={component} />
 		</div>
-		<div melt={$separator} class="my-4 md:my-6" />
+		<div use:melt={$separator} class="my-4 md:my-6" />
 		<!-- <DocsPager /> -->
 	</div>
 	<div class="hidden text-sm xl:block">
diff --git a/src/routes/docs/builders/[name]/+page.svelte b/src/routes/docs/builders/[name]/+page.svelte
index 865c5b85..7192f4ff 100644
--- a/src/routes/docs/builders/[name]/+page.svelte
+++ b/src/routes/docs/builders/[name]/+page.svelte
@@ -3,7 +3,7 @@
 	import type { SvelteComponent } from 'svelte';
 	import type { PageData } from './$types';
 	import { cn } from '$docs/utils';
-	import { createSeparator } from '$lib';
+	import { createSeparator, melt } from '$lib';
 	import { page } from '$app/stores';
 
 	const {
@@ -36,7 +36,7 @@
 				</Description>
 			{/if}
 		</div>
-		<div melt={$separator} class="my-4 md:my-6" />
+		<div use:melt={$separator} class="my-4 md:my-6" />
 		<div class="mdsvex" id="mdsvex">
 			<Preview code={snippets.main} {viewCode}>
 				<svelte:component this={mainPreview} />
@@ -45,7 +45,7 @@
 
 			<svelte:component this={component} {snippets} {schemas} {previews} {keyboard} />
 		</div>
-		<div melt={$separator} class="my-4 md:my-6" />
+		<div use:melt={$separator} class="my-4 md:my-6" />
 		<!-- <DocsPager /> -->
 	</div>
 	<div class="hidden text-sm xl:block">
diff --git a/src/stories/Collapsible/Collapsible.svelte b/src/stories/Collapsible/Collapsible.svelte
index 8554eac5..826f7673 100644
--- a/src/stories/Collapsible/Collapsible.svelte
+++ b/src/stories/Collapsible/Collapsible.svelte
@@ -4,6 +4,7 @@
 	import { slide } from 'svelte/transition';
 	import { X } from 'lucide-svelte';
 	import { ChevronsUpDown } from 'lucide-svelte';
+	import { melt } from '@melt-ui/svelte';
 
 	let openProp: boolean;
 	let disabledProp: boolean;
@@ -23,11 +24,11 @@
 </script>
 
 <PreviewWrapper>
-	<div melt={$root} class="mx-auto w-screen max-w-md">
+	<div use:melt={$root} class="mx-auto w-screen max-w-md">
 		<div class="flex items-center justify-between">
 			<span class="text-sm leading-6 text-white"> @thomasglopes starred 3 repositories </span>
 			<button
-				melt={$trigger}
+				use:melt={$trigger}
 				class="relative h-6 w-6 place-items-center rounded-full bg-white text-sm text-magnum-700
 				shadow-lg hover:opacity-75
 				data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75"
@@ -47,7 +48,7 @@
 		</div>
 
 		{#if $open}
-			<div melt={$content} transition:slide>
+			<div use:melt={$content} transition:slide>
 				<div class="flex flex-col gap-2">
 					<div class="rounded bg-white p-3 shadow-lg">
 						<span class="text-base leading-6 text-magnum-800">sveltejs/svelte</span>
diff --git a/src/stories/Dialog/BaseDialog.svelte b/src/stories/Dialog/BaseDialog.svelte
index a00b1cf2..017e964e 100644
--- a/src/stories/Dialog/BaseDialog.svelte
+++ b/src/stories/Dialog/BaseDialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Dialog } from '$lib/builders';
 	import { styleToString } from '$lib/internal/helpers';
+	import { melt } from '@melt-ui/svelte';
 	import { cubicOut } from 'svelte/easing';
 	import type { TransitionConfig } from 'svelte/transition';
 
@@ -48,13 +49,13 @@
 
 <div>
 	{#if $open}
-		<div melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
+		<div use:melt={$overlay} class="fixed inset-0 z-40 bg-black/50" />
 		<div
 			class="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[450px]
 				translate-x-[-50%] translate-y-[-50%] rounded-md bg-white p-6
 				shadow-lg"
 			transition:flyAndScale={{ duration: 150, y: 8, start: 0.96 }}
-			melt={$content}
+			use:melt={$content}
 		>
 			<slot title={$title} description={$description} close={$close} />
 		</div>
diff --git a/src/stories/Dialog/Dialog.svelte b/src/stories/Dialog/Dialog.svelte
index a4dac6b5..84f6a70a 100644
--- a/src/stories/Dialog/Dialog.svelte
+++ b/src/stories/Dialog/Dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { PreviewWrapper } from '$docs/components';
 	import BaseDialog from './BaseDialog.svelte';
@@ -12,7 +12,7 @@
 
 <PreviewWrapper>
 	<button
-		melt={$trigger}
+		use:melt={$trigger}
 		class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
 		font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75"
 	>
@@ -20,8 +20,8 @@
 	</button>
 
 	<BaseDialog {dialog}>
-		<h2 melt={$title} class="m-0 text-lg font-medium text-black">Edit profile</h2>
-		<p melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<h2 use:melt={$title} class="m-0 text-lg font-medium text-black">Edit profile</h2>
+		<p use:melt={$description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			Make changes to your profile here. Click save when you're done.
 		</p>
 
@@ -45,14 +45,14 @@
 		</fieldset>
 		<div class="mt-6 flex justify-end gap-4">
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px] bg-zinc-100
 					px-4 font-medium leading-none text-zinc-600"
 			>
 				Cancel
 			</button>
 			<button
-				melt={$close}
+				use:melt={$close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px] bg-magnum-100
 					px-4 font-medium leading-none text-magnum-900"
 			>
diff --git a/src/stories/Dialog/NestedDialog.svelte b/src/stories/Dialog/NestedDialog.svelte
index 68624eec..2cee25c6 100644
--- a/src/stories/Dialog/NestedDialog.svelte
+++ b/src/stories/Dialog/NestedDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	/** Internal helpers */
 	import { PreviewWrapper } from '$docs/components';
 	import BaseDialog from './BaseDialog.svelte';
@@ -17,7 +17,7 @@
 
 <PreviewWrapper>
 	<button
-		melt={$trigger}
+		use:melt={$trigger}
 		class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
 		font-medium leading-none text-magnum-700 shadow-lg hover:opacity-75
 		"
@@ -26,21 +26,21 @@
 	</button>
 
 	<BaseDialog {dialog} let:title let:description let:close>
-		<h2 melt={title} class="m-0 text-lg font-medium text-black">First Dialog</h2>
-		<p melt={description} class="mb-5 mt-2 leading-normal text-zinc-600">
+		<h2 use:melt={title} class="m-0 text-lg font-medium text-black">First Dialog</h2>
+		<p use:melt={description} class="mb-5 mt-2 leading-normal text-zinc-600">
 			Open the second dialog from here.
 		</p>
 
 		<div class="flex items-center justify-end gap-4">
 			<button
-				melt={close}
+				use:melt={close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px] bg-neutral-100
       px-4 font-medium leading-none text-neutral-900"
 			>
 				Close
 			</button>
 			<button
-				melt={$secondTrigger}
+				use:melt={$secondTrigger}
 				class="inline-flex h-8 items-center justify-center rounded-[4px] bg-magnum-100
     px-4 font-medium leading-none text-magnum-900"
 			>
@@ -50,12 +50,12 @@
 	</BaseDialog>
 
 	<BaseDialog dialog={secondDialog} let:title let:description let:close>
-		<h2 melt={title} class="m-0 text-lg font-medium text-black">Second Dialog</h2>
-		<p melt={description} class="mb-5 mt-2 leading-normal text-zinc-600">Cool!</p>
+		<h2 use:melt={title} class="m-0 text-lg font-medium text-black">Second Dialog</h2>
+		<p use:melt={description} class="mb-5 mt-2 leading-normal text-zinc-600">Cool!</p>
 
 		<div class="flex items-center justify-end gap-4">
 			<button
-				melt={close}
+				use:melt={close}
 				class="inline-flex h-8 items-center justify-center rounded-[4px] bg-neutral-100
       px-4 font-medium leading-none text-neutral-900"
 			>


Test patch:
diff --git a/src/lib/builders/accordion/tests/AccordionTest.svelte b/src/lib/builders/accordion/tests/AccordionTest.svelte
index 6acf8391..091ebcf4 100644
--- a/src/lib/builders/accordion/tests/AccordionTest.svelte
+++ b/src/lib/builders/accordion/tests/AccordionTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAccordion, type CreateAccordionProps } from '@melt-ui/svelte';
+	import { createAccordion, type CreateAccordionProps, melt } from '@melt-ui/svelte';
 
 	export let type: 'single' | 'multiple' = 'single';
 	export let disabled: CreateAccordionProps['disabled'] = undefined;
@@ -11,16 +11,16 @@
 	} = createAccordion({ type, disabled });
 </script>
 
-<div melt={$root}>
+<div use:melt={$root}>
 	{#each items as { id, triggerId, title, description }, i}
-		<div melt={$item(id)} data-testid={id}>
+		<div use:melt={$item(id)} data-testid={id}>
 			<h2 class="flex">
-				<button data-testid={triggerId} melt={$trigger(id)}>
+				<button data-testid={triggerId} use:melt={$trigger(id)}>
 					{title}
 				</button>
 			</h2>
 			{#if $isSelected(id)}
-				<div melt={$content(id)}>
+				<div use:melt={$content(id)}>
 					{description}
 				</div>
 			{/if}
diff --git a/src/lib/builders/avatar/tests/AvatarTest.svelte b/src/lib/builders/avatar/tests/AvatarTest.svelte
index c4186d2e..739acaca 100644
--- a/src/lib/builders/avatar/tests/AvatarTest.svelte
+++ b/src/lib/builders/avatar/tests/AvatarTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createAvatar } from '..';
+	import { createAvatar, melt } from '@melt-ui/svelte';
 
 	export let src = 'https://avatars.githubusercontent.com/u/1162160?v=4';
 
@@ -11,6 +11,7 @@
 </script>
 
 <div class="flex h-24 w-24 items-center justify-center rounded-full bg-neutral-100">
-	<img melt={$image} alt="Avatar" class="h-full w-full rounded-[inherit]" data-testid="image" />
-	<span melt={$fallback} class="text-3xl font-medium text-black" data-testid="fallback">RH</span>
+	<img use:melt={$image} alt="Avatar" class="h-full w-full rounded-[inherit]" data-testid="image" />
+	<span use:melt={$fallback} class="text-3xl font-medium text-black" data-testid="fallback">RH</span
+	>
 </div>
diff --git a/src/lib/builders/checkbox/tests/CheckboxTest.svelte b/src/lib/builders/checkbox/tests/CheckboxTest.svelte
index e46a7fc2..8b41ed72 100644
--- a/src/lib/builders/checkbox/tests/CheckboxTest.svelte
+++ b/src/lib/builders/checkbox/tests/CheckboxTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCheckbox, type CreateCheckboxProps } from '..';
+	import { createCheckbox, type CreateCheckboxProps, melt } from '@melt-ui/svelte';
 
 	export let defaultChecked: CreateCheckboxProps['defaultChecked'] = 'indeterminate';
 
@@ -12,7 +12,7 @@
 </script>
 
 <main>
-	<button melt={$root} data-testid="checkbox">
+	<button use:melt={$root} data-testid="checkbox">
 		{#if $isChecked}
 			checked
 		{:else}
diff --git a/src/lib/builders/collapsible/tests/CollapsibleTest.svelte b/src/lib/builders/collapsible/tests/CollapsibleTest.svelte
index acf28c27..d93ffbc9 100644
--- a/src/lib/builders/collapsible/tests/CollapsibleTest.svelte
+++ b/src/lib/builders/collapsible/tests/CollapsibleTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createCollapsible } from '..';
+	import { createCollapsible, melt } from '@melt-ui/svelte';
 
 	export let open = false;
 
@@ -10,7 +10,7 @@
 	});
 </script>
 
-<div melt={$root}>
-	<button melt={$trigger} data-testid="trigger">Trigger</button>
-	<div melt={$content} data-testid="content">Content</div>
+<div use:melt={$root}>
+	<button use:melt={$trigger} data-testid="trigger">Trigger</button>
+	<div use:melt={$content} data-testid="content">Content</div>
 </div>
diff --git a/src/lib/builders/dialog/tests/DialogNestedTest.svelte b/src/lib/builders/dialog/tests/DialogNestedTest.svelte
index 1259cfe6..6b08c5c4 100644
--- a/src/lib/builders/dialog/tests/DialogNestedTest.svelte
+++ b/src/lib/builders/dialog/tests/DialogNestedTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '$lib/builders';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 
 	const {
@@ -20,23 +20,23 @@
 </script>
 
 <main>
-	<button melt={$trigger} data-testid="trigger">Open</button>
+	<button use:melt={$trigger} data-testid="trigger">Open</button>
 	{#if $open}
-		<div melt={$overlay} data-testid="overlay" transition:fade />
-		<div melt={$content} data-testid="content">
-			<h2 melt={$title}>Title</h2>
-			<p melt={$description}>Description</p>
+		<div use:melt={$overlay} data-testid="overlay" transition:fade />
+		<div use:melt={$content} data-testid="content">
+			<h2 use:melt={$title}>Title</h2>
+			<p use:melt={$description}>Description</p>
 
-			<button melt={$close} data-testid="closer">Close</button>
-			<button melt={$triggerA} data-testid="triggerA">Close2</button>
+			<button use:melt={$close} data-testid="closer">Close</button>
+			<button use:melt={$triggerA} data-testid="triggerA">Close2</button>
 			{#if $openA}
-				<div melt={$overlayA} data-testid="overlayA" />
-				<div melt={$contentA} data-testid="contentA" transition:fade>
-					<h2 melt={$titleA}>Title</h2>
-					<p melt={$descriptionA}>Description</p>
+				<div use:melt={$overlayA} data-testid="overlayA" />
+				<div use:melt={$contentA} data-testid="contentA" transition:fade>
+					<h2 use:melt={$titleA}>Title</h2>
+					<p use:melt={$descriptionA}>Description</p>
 
-					<button melt={$closeA} data-testid="closerA">Close</button>
-					<button melt={$closeA} data-testid="lastA">Close2</button>
+					<button use:melt={$closeA} data-testid="closerA">Close</button>
+					<button use:melt={$closeA} data-testid="lastA">Close2</button>
 				</div>
 			{/if}
 		</div>
diff --git a/src/lib/builders/dialog/tests/DialogTest.svelte b/src/lib/builders/dialog/tests/DialogTest.svelte
index c8180565..3cea569b 100644
--- a/src/lib/builders/dialog/tests/DialogTest.svelte
+++ b/src/lib/builders/dialog/tests/DialogTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { trigger, overlay, content, title, description, close },
@@ -7,14 +7,14 @@
 </script>
 
 <main>
-	<button melt={$trigger} data-testid="trigger">Open</button>
-	<div melt={$overlay} data-testid="overlay" />
-	<div melt={$content} data-testid="content">
-		<h2 melt={$title}>Title</h2>
-		<p melt={$description}>Description</p>
+	<button use:melt={$trigger} data-testid="trigger">Open</button>
+	<div use:melt={$overlay} data-testid="overlay" />
+	<div use:melt={$content} data-testid="content">
+		<h2 use:melt={$title}>Title</h2>
+		<p use:melt={$description}>Description</p>
 
-		<button melt={$close} data-testid="closer">Close</button>
-		<button melt={$close} data-testid="last">Close</button>
+		<button use:melt={$close} data-testid="closer">Close</button>
+		<button use:melt={$close} data-testid="last">Close</button>
 	</div>
 </main>
 
diff --git a/src/lib/builders/dialog/tests/DialogTransitionTest.svelte b/src/lib/builders/dialog/tests/DialogTransitionTest.svelte
index 63d600bf..343a6b3f 100644
--- a/src/lib/builders/dialog/tests/DialogTransitionTest.svelte
+++ b/src/lib/builders/dialog/tests/DialogTransitionTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDialog } from '$lib/builders';
+	import { createDialog, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 
 	const {
@@ -9,15 +9,15 @@
 </script>
 
 <main>
-	<button melt={$trigger} data-testid="trigger">Open</button>
+	<button use:melt={$trigger} data-testid="trigger">Open</button>
 	{#if $open}
-		<div melt={$overlay} data-testid="overlay" transition:fade />
-		<div melt={$content} data-testid="content">
-			<h2 melt={$title}>Title</h2>
-			<p melt={$description}>Description</p>
+		<div use:melt={$overlay} data-testid="overlay" transition:fade />
+		<div use:melt={$content} data-testid="content">
+			<h2 use:melt={$title}>Title</h2>
+			<p use:melt={$description}>Description</p>
 
-			<button melt={$close} data-testid="closer">Close</button>
-			<button melt={$close} data-testid="last">Close2</button>
+			<button use:melt={$close} data-testid="closer">Close</button>
+			<button use:melt={$close} data-testid="last">Close2</button>
 		</div>
 	{/if}
 </main>
diff --git a/src/lib/builders/dropdown-menu/tests/DropdownMenuForceVisibleTest.svelte b/src/lib/builders/dropdown-menu/tests/DropdownMenuForceVisibleTest.svelte
index c821deba..908848b8 100644
--- a/src/lib/builders/dropdown-menu/tests/DropdownMenuForceVisibleTest.svelte
+++ b/src/lib/builders/dropdown-menu/tests/DropdownMenuForceVisibleTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDropdownMenu } from '$lib';
+	import { createDropdownMenu, melt } from '$lib';
 	import { writable } from 'svelte/store';
 	import { AlignJustify, ChevronRight } from 'lucide-svelte';
 	import { slide } from 'svelte/transition';
@@ -36,7 +36,7 @@
 	<button
 		type="button"
 		class="trigger"
-		melt={$trigger}
+		use:melt={$trigger}
 		aria-label="Update dimensions"
 		data-testid="trigger"
 	>
@@ -44,10 +44,10 @@
 		<span class="sr-only">Open Popover</span>
 	</button>
 	{#if $open}
-		<div class="menu" melt={$menu} data-testid="menu" transition:slide>
-			<div class="item" melt={$item} data-testid="item1">Item 1</div>
-			<div class="item" melt={$item} data-testid="item2" aria-disabled="true">Item 2</div>
-			<div class="separator" melt={$separator} />
+		<div class="menu" use:melt={$menu} data-testid="menu" transition:slide>
+			<div class="item" use:melt={$item} data-testid="item1">Item 1</div>
+			<div class="item" use:melt={$item} data-testid="item2" aria-disabled="true">Item 2</div>
+			<div class="separator" use:melt={$separator} />
 			<div
 				data-testid="checkboxItem1"
 				class="item"
@@ -75,18 +75,22 @@
 				Item 4
 				<div class="rightSlot">⌘H</div>
 			</div>
-			<div class="item" melt={$subTriggerA} data-testid="subtrigger">
+			<div class="item" use:melt={$subTriggerA} data-testid="subtrigger">
 				Item 5
 				<div class="rightSlot">
 					<ChevronRight class="icon" />
 				</div>
 			</div>
 			{#if $subOpen}
-				<div class="menu subMenu" melt={$subMenuA} data-testid="submenu" transition:slide>
+				<div class="menu subMenu" use:melt={$subMenuA} data-testid="submenu" transition:slide>
 					<div class="text">People</div>
-					<div melt={$radioGroup}>
+					<div use:melt={$radioGroup}>
 						{#each personsArr as person, i}
-							<div class="item" melt={$radioItem({ value: person })} data-testid={`subitem${i}`}>
+							<div
+								class="item"
+								use:melt={$radioItem({ value: person })}
+								data-testid={`subitem${i}`}
+							>
 								<div class="check">
 									{#if $isChecked(person)}
 										<div class="dot" />
@@ -97,19 +101,19 @@
 						{/each}
 					</div>
 				</div>
-				<div melt={$separator} class="separator" />
+				<div use:melt={$separator} class="separator" />
 
-				<div class="item" melt={$item} aria-disabled="true">
+				<div class="item" use:melt={$item} aria-disabled="true">
 					Show All Components
 					<div class="rightSlot">⇧⌘N</div>
 				</div>
-				<div melt={$separator} class="separator" />
-				<div class="item" melt={$item}>
+				<div use:melt={$separator} class="separator" />
+				<div class="item" use:melt={$item}>
 					Quit Melt UI
 					<div class="rightSlot">⌘Q</div>
 				</div>
 			{/if}
-			<div melt={$arrow} data-testid="arrow" />
+			<div use:melt={$arrow} data-testid="arrow" />
 		</div>
 	{/if}
 </main>
diff --git a/src/lib/builders/dropdown-menu/tests/DropdownMenuTest.svelte b/src/lib/builders/dropdown-menu/tests/DropdownMenuTest.svelte
index 78320abe..14e725af 100644
--- a/src/lib/builders/dropdown-menu/tests/DropdownMenuTest.svelte
+++ b/src/lib/builders/dropdown-menu/tests/DropdownMenuTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createDropdownMenu } from '$lib';
+	import { createDropdownMenu, melt } from '$lib';
 	import { writable } from 'svelte/store';
 	import { AlignJustify, ChevronRight } from 'lucide-svelte';
 
@@ -29,7 +29,7 @@
 	<button
 		type="button"
 		class="trigger"
-		melt={$trigger}
+		use:melt={$trigger}
 		aria-label="Update dimensions"
 		data-testid="trigger"
 	>
@@ -37,10 +37,10 @@
 		<span class="sr-only">Open Popover</span>
 	</button>
 
-	<div class="menu" melt={$menu} data-testid="menu">
-		<div class="item" melt={$item} data-testid="item1">Item 1</div>
-		<div class="item" melt={$item} data-testid="item2" aria-disabled="true">Item 2</div>
-		<div class="separator" melt={$separator} />
+	<div class="menu" use:melt={$menu} data-testid="menu">
+		<div class="item" use:melt={$item} data-testid="item1">Item 1</div>
+		<div class="item" use:melt={$item} data-testid="item2" aria-disabled="true">Item 2</div>
+		<div class="separator" use:melt={$separator} />
 		<div
 			data-testid="checkboxItem1"
 			class="item"
@@ -68,17 +68,17 @@
 			Item 4
 			<div class="rightSlot">⌘H</div>
 		</div>
-		<div class="item" melt={$subTriggerA} data-testid="subtrigger">
+		<div class="item" use:melt={$subTriggerA} data-testid="subtrigger">
 			Item 5
 			<div class="rightSlot">
 				<ChevronRight class="icon" />
 			</div>
 		</div>
-		<div class="menu subMenu" melt={$subMenuA} data-testid="submenu">
+		<div class="menu subMenu" use:melt={$subMenuA} data-testid="submenu">
 			<div class="text">People</div>
-			<div melt={$radioGroup}>
+			<div use:melt={$radioGroup}>
 				{#each personsArr as person, i}
-					<div class="item" melt={$radioItem({ value: person })} data-testid={`subitem${i}`}>
+					<div class="item" use:melt={$radioItem({ value: person })} data-testid={`subitem${i}`}>
 						<div class="check">
 							{#if $isChecked(person)}
 								<div class="dot" />
@@ -89,18 +89,18 @@
 				{/each}
 			</div>
 		</div>
-		<div melt={$separator} class="separator" />
+		<div use:melt={$separator} class="separator" />
 
-		<div class="item" melt={$item} aria-disabled="true">
+		<div class="item" use:melt={$item} aria-disabled="true">
 			Show All Components
 			<div class="rightSlot">⇧⌘N</div>
 		</div>
-		<div melt={$separator} class="separator" />
-		<div class="item" melt={$item}>
+		<div use:melt={$separator} class="separator" />
+		<div class="item" use:melt={$item}>
 			Quit Melt UI
 			<div class="rightSlot">⌘Q</div>
 		</div>
-		<div melt={$arrow} data-testid="arrow" />
+		<div use:melt={$arrow} data-testid="arrow" />
 	</div>
 </main>
 
diff --git a/src/lib/builders/hover-card/tests/HoverCardTest.svelte b/src/lib/builders/hover-card/tests/HoverCardTest.svelte
index 0dbd474c..e116f5e4 100644
--- a/src/lib/builders/hover-card/tests/HoverCardTest.svelte
+++ b/src/lib/builders/hover-card/tests/HoverCardTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createHoverCard } from '@melt-ui/svelte';
+	import { createHoverCard, melt } from '@melt-ui/svelte';
 
 	const {
 		elements: { trigger, content, arrow },
@@ -14,7 +14,7 @@
 	href="https://github.com/melt-ui/melt-ui"
 	target="_blank"
 	rel="noreferrer"
-	melt={$trigger}
+	use:melt={$trigger}
 >
 	<img
 		src="/logo-mark.svg"
@@ -24,7 +24,7 @@
 	<span class="sr-only">Open Melt UI Details</span>
 </a>
 
-<div melt={$content} class="z-10 rounded-md bg-white shadow-sm" data-testid="content">
+<div use:melt={$content} class="z-10 rounded-md bg-white shadow-sm" data-testid="content">
 	<div class="w-[300px] rounded-md bg-white p-5 shadow-sm">
 		<div class="flex flex-col gap-2">
 			<img
@@ -53,7 +53,7 @@
 			</div>
 		</div>
 	</div>
-	<div melt={$arrow} data-testid="arrow" />
+	<div use:melt={$arrow} data-testid="arrow" />
 </div>
 <div data-testid="start" />
 
diff --git a/src/lib/builders/pagination/tests/cmp.svelte b/src/lib/builders/pagination/tests/cmp.svelte
index 1dedad63..b04e4a9a 100644
--- a/src/lib/builders/pagination/tests/cmp.svelte
+++ b/src/lib/builders/pagination/tests/cmp.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPagination } from '@melt-ui/svelte';
+	import { createPagination, melt } from '@melt-ui/svelte';
 	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 
 	const {
@@ -13,19 +13,19 @@
 	});
 </script>
 
-<nav aria-label="pagination" melt={$root} data-testid="root">
+<nav aria-label="pagination" use:melt={$root} data-testid="root">
 	<p>
 		Showing items {$range.start} - {$range.end}
 	</p>
 	<div>
-		<button melt={$prevButton} data-testid="prev"><ChevronLeft /></button>
+		<button use:melt={$prevButton} data-testid="prev"><ChevronLeft /></button>
 		{#each $pages as page (page.key)}
 			{#if page.type === 'ellipsis'}
 				<span>...</span>
 			{:else}
-				<button melt={$pageTrigger(page)}>{page.value}</button>
+				<button use:melt={$pageTrigger(page)}>{page.value}</button>
 			{/if}
 		{/each}
-		<button melt={$nextButton} data-testid="next"><ChevronRight /></button>
+		<button use:melt={$nextButton} data-testid="next"><ChevronRight /></button>
 	</div>
 </nav>
diff --git a/src/lib/builders/popover/tests/PopoverTest.svelte b/src/lib/builders/popover/tests/PopoverTest.svelte
index 42968b7b..905684c8 100644
--- a/src/lib/builders/popover/tests/PopoverTest.svelte
+++ b/src/lib/builders/popover/tests/PopoverTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createPopover } from '@melt-ui/svelte';
+	import { createPopover, melt } from '@melt-ui/svelte';
 	import { Settings2, X } from 'lucide-svelte';
 
 	const {
@@ -10,7 +10,7 @@
 <button
 	type="button"
 	class="trigger"
-	melt={$trigger}
+	use:melt={$trigger}
 	aria-label="Update dimensions"
 	data-testid="trigger"
 >
@@ -18,8 +18,8 @@
 	<span class="sr-only">Open Popover</span>
 </button>
 
-<div melt={$content} class="content" data-testid="content">
-	<div melt={$arrow} data-testid="arrow" />
+<div use:melt={$content} class="content" data-testid="content">
+	<div use:melt={$arrow} data-testid="arrow" />
 	<div class="flex flex-col gap-2.5">
 		<p>Dimensions</p>
 		<fieldset>
@@ -39,7 +39,7 @@
 			<input type="number" id="weight" class="input" placeholder="Weight" data-testid="input4" />
 		</fieldset>
 	</div>
-	<button class="close" melt={$close} data-testid="close">
+	<button class="close" use:melt={$close} data-testid="close">
 		<X class="h-4 w-4 " />
 	</button>
 </div>
diff --git a/src/lib/builders/select/test/SelectTest.svelte b/src/lib/builders/select/test/SelectTest.svelte
index 037b26bb..27750378 100644
--- a/src/lib/builders/select/test/SelectTest.svelte
+++ b/src/lib/builders/select/test/SelectTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createSelect } from '@melt-ui/svelte';
+	import { createSelect, melt } from '@melt-ui/svelte';
 	import { Check, ChevronDown } from 'lucide-svelte';
 
 	const {
@@ -15,19 +15,19 @@
 </script>
 
 <main>
-	<button class="trigger" melt={$trigger} aria-label="Food" data-testid="trigger">
+	<button class="trigger" use:melt={$trigger} aria-label="Food" data-testid="trigger">
 		{$valueLabel || 'Select an option'}
 		<ChevronDown />
 	</button>
 
-	<div class="menu" melt={$menu} data-testid="menu">
+	<div class="menu" use:melt={$menu} data-testid="menu">
 		{#each Object.entries(options) as [key, arr]}
-			<div melt={$group(key)} data-testid="group-{key}">
-				<div class="label" melt={$groupLabel(key)} data-testid="label-{key}">{key}</div>
+			<div use:melt={$group(key)} data-testid="group-{key}">
+				<div class="label" use:melt={$groupLabel(key)} data-testid="label-{key}">{key}</div>
 				{#each arr as item, i}
 					<div
 						class="option"
-						melt={$option({ value: item, label: item, disabled: i === 2 })}
+						use:melt={$option({ value: item, label: item, disabled: i === 2 })}
 						data-testid="{key}-option-{i}"
 					>
 						{#if $isSelected(item)}
diff --git a/src/lib/builders/separator/tests/SeparatorTest.svelte b/src/lib/builders/separator/tests/SeparatorTest.svelte
index f4b86792..6f761aab 100644
--- a/src/lib/builders/separator/tests/SeparatorTest.svelte
+++ b/src/lib/builders/separator/tests/SeparatorTest.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Orientation } from '$lib/internal/types';
-	import { createSeparator } from '..';
+	import { createSeparator, melt } from '@melt-ui/svelte';
 
 	export let orientation: Orientation = 'vertical';
 
@@ -20,10 +20,10 @@
 
 <div>
 	<h2>Separator</h2>
-	<div melt={$horizontalSeparator} data-testid="horizontal" />
+	<div use:melt={$horizontalSeparator} data-testid="horizontal" />
 	<div>
 		<p>Part 1</p>
-		<div melt={$vertical} data-testid="vertical" />
+		<div use:melt={$vertical} data-testid="vertical" />
 		<p>Part 2</p>
 	</div>
 </div>