From 9586afc8bf2b09450a01a3061b8c27a546f96d78 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Thu, 19 Mar 2026 17:56:50 +0200
Subject: [PATCH] docs: update snippets

---
 .../data/snippets/react/accordion/usage.mdx   |  2 +-
 .../react/angle-slider/tick-marks.mdx         |  2 +-
 .../snippets/react/angle-slider/usage.mdx     |  5 ++--
 .../snippets/react/avatar/component.api.mdx   |  1 +
 website/data/snippets/react/avatar/usage.mdx  |  5 ++--
 .../data/snippets/react/carousel/usage.mdx    |  2 +-
 .../data/snippets/react/checkbox/usage.mdx    |  2 +-
 .../snippets/react/color-picker/usage.mdx     |  2 +-
 .../data/snippets/react/combobox/usage.mdx    |  2 +-
 .../data/snippets/react/date-input/usage.mdx  |  2 +-
 .../data/snippets/react/date-picker/usage.mdx |  2 +-
 .../snippets/react/dialog/initial-focus.mdx   |  2 +-
 website/data/snippets/react/dialog/usage.mdx  |  3 ++-
 .../react/editable/custom-controls.mdx        |  9 ++++----
 .../data/snippets/react/editable/usage.mdx    |  5 ++--
 .../data/snippets/react/file-upload/usage.mdx |  2 +-
 .../data/snippets/react/hover-card/usage.mdx  |  5 ++--
 .../snippets/react/image-cropper/usage.mdx    |  2 +-
 .../snippets/react/listbox/grid-usage.mdx     |  2 +-
 website/data/snippets/react/listbox/usage.mdx |  2 +-
 .../data/snippets/react/menu/context-menu.mdx |  5 ++--
 .../data/snippets/react/menu/nested-menu.mdx  |  6 ++---
 .../data/snippets/react/menu/option-items.mdx |  2 +-
 website/data/snippets/react/menu/usage.mdx    |  2 +-
 .../react/navigation-menu/controlled.mdx      |  2 +-
 .../snippets/react/navigation-menu/usage.mdx  |  2 +-
 .../react/navigation-menu/viewport-usage.mdx  |  2 +-
 .../react/navigation-menu/with-indicator.mdx  |  2 +-
 .../snippets/react/number-input/scrubber.mdx  |  5 ++--
 .../snippets/react/number-input/usage.mdx     |  2 +-
 .../data/snippets/react/pagination/usage.mdx  |  5 ++--
 .../snippets/react/password-input/usage.mdx   |  2 +-
 .../data/snippets/react/pin-input/usage.mdx   |  5 ++--
 .../snippets/react/popover/initial-focus.mdx  |  2 +-
 .../react/popover/render-in-portal.mdx        |  6 ++---
 website/data/snippets/react/popover/usage.mdx |  2 +-
 .../data/snippets/react/progress/circular.mdx |  2 +-
 .../data/snippets/react/progress/usage.mdx    |  2 +-
 website/data/snippets/react/qr-code/usage.mdx |  2 +-
 .../data/snippets/react/radio-group/usage.mdx |  5 ++--
 .../snippets/react/range-slider/usage.mdx     |  5 ++--
 .../snippets/react/rating-group/usage.mdx     |  5 ++--
 .../data/snippets/react/scroll-area/usage.mdx |  2 +-
 .../react/segmented-control/usage.mdx         |  5 ++--
 .../snippets/react/select/usage-with-form.mdx |  2 +-
 website/data/snippets/react/select/usage.mdx  |  4 ++--
 .../snippets/react/signature-pad/usage.mdx    |  4 ++--
 .../data/snippets/react/slider/tick-marks.mdx |  2 +-
 website/data/snippets/react/slider/usage.mdx  |  5 ++--
 .../data/snippets/react/splitter/usage.mdx    |  4 ++--
 website/data/snippets/react/steps/usage.mdx   |  2 +-
 website/data/snippets/react/switch/usage.mdx  |  7 +++---
 website/data/snippets/react/tabs/usage.mdx    |  5 ++--
 .../snippets/react/tabs/with-indicator.mdx    |  2 +-
 .../data/snippets/react/tags-input/usage.mdx  |  5 ++--
 website/data/snippets/react/timer/usage.mdx   |  3 ++-
 website/data/snippets/react/toast/usage.mdx   |  2 +-
 .../snippets/react/toast/using-portal.mdx     |  2 +-
 website/data/snippets/react/toc/usage.mdx     |  5 ++--
 .../snippets/react/toggle-group/usage.mdx     |  2 +-
 website/data/snippets/react/tooltip/usage.mdx |  5 ++--
 website/data/snippets/solid/avatar/usage.mdx  |  3 ++-
 .../data/snippets/solid/date-input/usage.mdx  |  4 ++--
 .../data/snippets/solid/date-picker/usage.mdx |  3 ++-
 website/data/snippets/solid/drawer/usage.mdx  |  4 ++--
 .../data/snippets/solid/hover-card/usage.mdx  |  4 ++--
 .../data/snippets/solid/presence/usage.mdx    |  2 +-
 .../data/snippets/solid/progress/circular.mdx |  2 +-
 .../data/snippets/solid/progress/usage.mdx    |  2 +-
 .../snippets/solid/select/usage-with-form.mdx | 15 ++++++------
 website/data/snippets/solid/switch/usage.mdx  |  2 +-
 .../svelte/angle-slider/tick-marks.mdx        |  6 ++---
 .../data/snippets/svelte/clipboard/usage.mdx  |  9 +++++---
 .../data/snippets/svelte/date-input/usage.mdx | 23 ++++++++++---------
 .../svelte/navigation-menu/controlled.mdx     | 16 +++++++------
 website/data/snippets/vue/clipboard/usage.mdx |  2 +-
 .../data/snippets/vue/date-input/usage.mdx    | 12 +++++-----
 website/data/snippets/vue/drawer/usage.mdx    |  2 +-
 .../snippets/vue/floating-panel/usage.mdx     |  2 +-
 .../data/snippets/vue/listbox/grid-usage.mdx  |  2 +-
 website/data/snippets/vue/listbox/usage.mdx   |  2 +-
 website/data/snippets/vue/marquee/usage.mdx   |  2 +-
 .../vue/navigation-menu/controlled.mdx        | 20 ++++++++--------
 .../snippets/vue/navigation-menu/usage.mdx    | 10 ++++----
 .../vue/navigation-menu/viewport-usage.mdx    | 10 ++++----
 .../snippets/vue/password-input/usage.mdx     |  2 +-
 .../data/snippets/vue/scroll-area/usage.mdx   |  2 +-
 .../data/snippets/vue/signature-pad/usage.mdx |  2 +-
 website/data/snippets/vue/steps/usage.mdx     |  2 +-
 website/data/snippets/vue/tour/usage.mdx      |  2 +-
 90 files changed, 199 insertions(+), 170 deletions(-)

diff --git a/website/data/snippets/react/accordion/usage.mdx b/website/data/snippets/react/accordion/usage.mdx
index 07be898db8..9229515939 100644
--- a/website/data/snippets/react/accordion/usage.mdx
+++ b/website/data/snippets/react/accordion/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as accordion from "@zag-js/accordion"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/angle-slider/tick-marks.mdx b/website/data/snippets/react/angle-slider/tick-marks.mdx
index af4be5990b..b6a68822ad 100644
--- a/website/data/snippets/react/angle-slider/tick-marks.mdx
+++ b/website/data/snippets/react/angle-slider/tick-marks.mdx
@@ -1,4 +1,4 @@
-```jsx {7-11}
+```tsx {7-11}
 //...
 
 <div {...api.getRootProps()}>
diff --git a/website/data/snippets/react/angle-slider/usage.mdx b/website/data/snippets/react/angle-slider/usage.mdx
index 902e6cdfbb..950c1886ac 100644
--- a/website/data/snippets/react/angle-slider/usage.mdx
+++ b/website/data/snippets/react/angle-slider/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as angleSlider from "@zag-js/angle-slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
+import { useId } from "react"
 
 export function AngleSlider() {
-  const service = useMachine(angleSlider.machine, { id: "1" })
+  const service = useMachine(angleSlider.machine, { id: useId() })
 
   const api = angleSlider.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/avatar/component.api.mdx b/website/data/snippets/react/avatar/component.api.mdx
index b871b35982..b7304699c5 100644
--- a/website/data/snippets/react/avatar/component.api.mdx
+++ b/website/data/snippets/react/avatar/component.api.mdx
@@ -1,6 +1,7 @@
 ```tsx
 import * as avatar from "@zag-js/avatar"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export interface AvatarProps extends Omit<avatar.Context, "id"> {
   /**
diff --git a/website/data/snippets/react/avatar/usage.mdx b/website/data/snippets/react/avatar/usage.mdx
index ce41261a63..53d355034c 100644
--- a/website/data/snippets/react/avatar/usage.mdx
+++ b/website/data/snippets/react/avatar/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as avatar from "@zag-js/avatar"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 function Avatar() {
-  const service = useMachine(avatar.machine, { id: "1" })
+  const service = useMachine(avatar.machine, { id: useId() })
 
   const api = avatar.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/carousel/usage.mdx b/website/data/snippets/react/carousel/usage.mdx
index 43168dc1a9..14c90c1495 100644
--- a/website/data/snippets/react/carousel/usage.mdx
+++ b/website/data/snippets/react/carousel/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as carousel from "@zag-js/carousel"
 import { normalizeProps, useMachine } from "@zag-js/react"
 
diff --git a/website/data/snippets/react/checkbox/usage.mdx b/website/data/snippets/react/checkbox/usage.mdx
index 01eb718bd9..0a40c50fec 100644
--- a/website/data/snippets/react/checkbox/usage.mdx
+++ b/website/data/snippets/react/checkbox/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as checkbox from "@zag-js/checkbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/color-picker/usage.mdx b/website/data/snippets/react/color-picker/usage.mdx
index f4b44221c9..61c2485137 100644
--- a/website/data/snippets/react/color-picker/usage.mdx
+++ b/website/data/snippets/react/color-picker/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as colorPicker from "@zag-js/color-picker"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/combobox/usage.mdx b/website/data/snippets/react/combobox/usage.mdx
index 465c1f380d..9d1c28b7a2 100644
--- a/website/data/snippets/react/combobox/usage.mdx
+++ b/website/data/snippets/react/combobox/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as combobox from "@zag-js/combobox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useState, useId } from "react"
diff --git a/website/data/snippets/react/date-input/usage.mdx b/website/data/snippets/react/date-input/usage.mdx
index 710a3c68f3..043b885775 100644
--- a/website/data/snippets/react/date-input/usage.mdx
+++ b/website/data/snippets/react/date-input/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as dateInput from "@zag-js/date-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/date-picker/usage.mdx b/website/data/snippets/react/date-picker/usage.mdx
index bdd131c089..5ca879fa04 100644
--- a/website/data/snippets/react/date-picker/usage.mdx
+++ b/website/data/snippets/react/date-picker/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as datepicker from "@zag-js/date-picker"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/dialog/initial-focus.mdx b/website/data/snippets/react/dialog/initial-focus.mdx
index ef6708c884..e82d8785eb 100644
--- a/website/data/snippets/react/dialog/initial-focus.mdx
+++ b/website/data/snippets/react/dialog/initial-focus.mdx
@@ -1,4 +1,4 @@
-```jsx {3,6,13}
+```tsx {3,6,13}
 export function Dialog() {
   // initial focused element ref
   const inputRef = useRef(null)
diff --git a/website/data/snippets/react/dialog/usage.mdx b/website/data/snippets/react/dialog/usage.mdx
index 5afc1840c3..ffc057b7ab 100644
--- a/website/data/snippets/react/dialog/usage.mdx
+++ b/website/data/snippets/react/dialog/usage.mdx
@@ -1,9 +1,10 @@
 ```tsx
 import * as dialog from "@zag-js/dialog"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
+import { useId } from "react"
 
 export function Dialog() {
-  const service = useMachine(dialog.machine, { id: "1" })
+  const service = useMachine(dialog.machine, { id: useId() })
 
   const api = dialog.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/editable/custom-controls.mdx b/website/data/snippets/react/editable/custom-controls.mdx
index a6f66d1c25..708e9b63e1 100644
--- a/website/data/snippets/react/editable/custom-controls.mdx
+++ b/website/data/snippets/react/editable/custom-controls.mdx
@@ -1,11 +1,12 @@
-```jsx
+```tsx
 import * as editable from "@zag-js/editable"
-import { useMachine } from "@zag-js/react"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export default function Editable() {
-  const service = useMachine(editable.machine, { id: "1" })
+  const service = useMachine(editable.machine, { id: useId() })
 
-  const api = editable.connect(service)
+  const api = editable.connect(service, normalizeProps)
 
   return (
     <div {...api.getRootProps()}>
diff --git a/website/data/snippets/react/editable/usage.mdx b/website/data/snippets/react/editable/usage.mdx
index 497fcefcbd..fff58da608 100644
--- a/website/data/snippets/react/editable/usage.mdx
+++ b/website/data/snippets/react/editable/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as editable from "@zag-js/editable"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export default function Editable() {
-  const service = useMachine(editable.machine, { id: "1" })
+  const service = useMachine(editable.machine, { id: useId() })
 
   const api = editable.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/file-upload/usage.mdx b/website/data/snippets/react/file-upload/usage.mdx
index 79bb742d6c..3ae63a7111 100644
--- a/website/data/snippets/react/file-upload/usage.mdx
+++ b/website/data/snippets/react/file-upload/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as fileUpload from "@zag-js/file-upload"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/hover-card/usage.mdx b/website/data/snippets/react/hover-card/usage.mdx
index d189299c74..51a2357c34 100644
--- a/website/data/snippets/react/hover-card/usage.mdx
+++ b/website/data/snippets/react/hover-card/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as hoverCard from "@zag-js/hover-card"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
+import { useId } from "react"
 
 function HoverCard() {
-  const service = useMachine(hoverCard.machine, { id: "1" })
+  const service = useMachine(hoverCard.machine, { id: useId() })
 
   const api = hoverCard.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/image-cropper/usage.mdx b/website/data/snippets/react/image-cropper/usage.mdx
index 1c5468e172..6d792dd4e8 100644
--- a/website/data/snippets/react/image-cropper/usage.mdx
+++ b/website/data/snippets/react/image-cropper/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as imageCropper from "@zag-js/image-cropper"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/listbox/grid-usage.mdx b/website/data/snippets/react/listbox/grid-usage.mdx
index b3fe9fb8d3..be477e0ec8 100644
--- a/website/data/snippets/react/listbox/grid-usage.mdx
+++ b/website/data/snippets/react/listbox/grid-usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as listbox from "@zag-js/listbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/listbox/usage.mdx b/website/data/snippets/react/listbox/usage.mdx
index bfe567681d..c9552f77b4 100644
--- a/website/data/snippets/react/listbox/usage.mdx
+++ b/website/data/snippets/react/listbox/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as listbox from "@zag-js/listbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/menu/context-menu.mdx b/website/data/snippets/react/menu/context-menu.mdx
index db49680c6a..e9616811cc 100644
--- a/website/data/snippets/react/menu/context-menu.mdx
+++ b/website/data/snippets/react/menu/context-menu.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function ContextMenu() {
-  const service = useMachine(menu.machine, { id: "1" })
+  const service = useMachine(menu.machine, { id: useId() })
   const api = menu.connect(service, normalizeProps)
 
   return (
diff --git a/website/data/snippets/react/menu/nested-menu.mdx b/website/data/snippets/react/menu/nested-menu.mdx
index f44326a67d..9bafe53d37 100644
--- a/website/data/snippets/react/menu/nested-menu.mdx
+++ b/website/data/snippets/react/menu/nested-menu.mdx
@@ -1,12 +1,12 @@
 ```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
-import { useEffect } from "react"
+import { useEffect, useId } from "react"
 
 export function NestedMenu() {
   // Level 1 - File Menu
   const fileMenuService = useMachine(menu.machine, {
-    id: "1",
+    id: useId(),
     "aria-label": "File",
   })
 
@@ -14,7 +14,7 @@ export function NestedMenu() {
 
   // Level 2 - Share Menu
   const shareMenuService = useMachine(menu.machine, {
-    id: "2",
+    id: useId(),
     "aria-label": "Share",
   })
 
diff --git a/website/data/snippets/react/menu/option-items.mdx b/website/data/snippets/react/menu/option-items.mdx
index ac8e785b87..bb1aed9456 100644
--- a/website/data/snippets/react/menu/option-items.mdx
+++ b/website/data/snippets/react/menu/option-items.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useState } from "react"
diff --git a/website/data/snippets/react/menu/usage.mdx b/website/data/snippets/react/menu/usage.mdx
index 1373ed03e7..b76fdca8d2 100644
--- a/website/data/snippets/react/menu/usage.mdx
+++ b/website/data/snippets/react/menu/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/navigation-menu/controlled.mdx b/website/data/snippets/react/navigation-menu/controlled.mdx
index eb5a0e739d..d34e596127 100644
--- a/website/data/snippets/react/navigation-menu/controlled.mdx
+++ b/website/data/snippets/react/navigation-menu/controlled.mdx
@@ -1,4 +1,4 @@
-```jsx {1,4-8}
+```tsx {1,4-8}
 import { useState } from "react"
 
 export function NavigationMenu() {
diff --git a/website/data/snippets/react/navigation-menu/usage.mdx b/website/data/snippets/react/navigation-menu/usage.mdx
index 4485da5b46..ccfa102cce 100644
--- a/website/data/snippets/react/navigation-menu/usage.mdx
+++ b/website/data/snippets/react/navigation-menu/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as navigationMenu from "@zag-js/navigation-menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/navigation-menu/viewport-usage.mdx b/website/data/snippets/react/navigation-menu/viewport-usage.mdx
index 705662dfdf..9a7e73858e 100644
--- a/website/data/snippets/react/navigation-menu/viewport-usage.mdx
+++ b/website/data/snippets/react/navigation-menu/viewport-usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as navigationMenu from "@zag-js/navigation-menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/navigation-menu/with-indicator.mdx b/website/data/snippets/react/navigation-menu/with-indicator.mdx
index 3a17c1be2b..70a454d7ba 100644
--- a/website/data/snippets/react/navigation-menu/with-indicator.mdx
+++ b/website/data/snippets/react/navigation-menu/with-indicator.mdx
@@ -1,4 +1,4 @@
-```jsx {3-5}
+```tsx {3-5}
 <nav {...api.getRootProps()}>
   <div {...api.getListProps()}>
     {/* ... items ... */}
diff --git a/website/data/snippets/react/number-input/scrubber.mdx b/website/data/snippets/react/number-input/scrubber.mdx
index fd8b5d4766..e73f364a13 100644
--- a/website/data/snippets/react/number-input/scrubber.mdx
+++ b/website/data/snippets/react/number-input/scrubber.mdx
@@ -1,9 +1,10 @@
-```jsx {13}
+```tsx {13}
 import * as numberInput from "@zag-js/number-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function NumberInput() {
-  const service = useMachine(numberInput.machine, { id: "1" })
+  const service = useMachine(numberInput.machine, { id: useId() })
 
   const api = numberInput.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/number-input/usage.mdx b/website/data/snippets/react/number-input/usage.mdx
index c9d3cf94d4..beb28305cd 100644
--- a/website/data/snippets/react/number-input/usage.mdx
+++ b/website/data/snippets/react/number-input/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as numberInput from "@zag-js/number-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/pagination/usage.mdx b/website/data/snippets/react/pagination/usage.mdx
index 50ed1776c5..465366fc32 100644
--- a/website/data/snippets/react/pagination/usage.mdx
+++ b/website/data/snippets/react/pagination/usage.mdx
@@ -1,11 +1,12 @@
-```jsx
+```tsx
 import * as pagination from "@zag-js/pagination"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 import { data } from "./data"
 
 function Pagination() {
   const service = useMachine(pagination.machine, {
-    id: "1",
+    id: useId(),
     count: data.length,
   })
 
diff --git a/website/data/snippets/react/password-input/usage.mdx b/website/data/snippets/react/password-input/usage.mdx
index 5985ceb305..e7959dec28 100644
--- a/website/data/snippets/react/password-input/usage.mdx
+++ b/website/data/snippets/react/password-input/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as passwordInput from "@zag-js/password-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { EyeIcon, EyeOffIcon } from "lucide-react"
diff --git a/website/data/snippets/react/pin-input/usage.mdx b/website/data/snippets/react/pin-input/usage.mdx
index 01a3622dd6..3497cf53b9 100644
--- a/website/data/snippets/react/pin-input/usage.mdx
+++ b/website/data/snippets/react/pin-input/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as pinInput from "@zag-js/pin-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function PinInput() {
-  const service = useMachine(pinInput.machine, { id: "1" })
+  const service = useMachine(pinInput.machine, { id: useId() })
 
   const api = pinInput.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/popover/initial-focus.mdx b/website/data/snippets/react/popover/initial-focus.mdx
index bc7916a23c..313e99d0b1 100644
--- a/website/data/snippets/react/popover/initial-focus.mdx
+++ b/website/data/snippets/react/popover/initial-focus.mdx
@@ -1,4 +1,4 @@
-```jsx {3,7,14}
+```tsx {3,7,14}
 export function Popover() {
   // initial focused element ref
   const inputRef = useRef(null)
diff --git a/website/data/snippets/react/popover/render-in-portal.mdx b/website/data/snippets/react/popover/render-in-portal.mdx
index 60ea798315..c395e478ce 100644
--- a/website/data/snippets/react/popover/render-in-portal.mdx
+++ b/website/data/snippets/react/popover/render-in-portal.mdx
@@ -1,10 +1,10 @@
-```jsx
+```tsx
 import * as popover from "@zag-js/popover"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
-import * as React from "react"
+import { useId } from "react"
 
 export function Popover() {
-  const service = useMachine(popover.machine, { id: "1" })
+  const service = useMachine(popover.machine, { id: useId() })
 
   const api = popover.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/popover/usage.mdx b/website/data/snippets/react/popover/usage.mdx
index 79017b4868..4bf39d3417 100644
--- a/website/data/snippets/react/popover/usage.mdx
+++ b/website/data/snippets/react/popover/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import { useId } from "react"
 import * as popover from "@zag-js/popover"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
diff --git a/website/data/snippets/react/progress/circular.mdx b/website/data/snippets/react/progress/circular.mdx
index 258b764b87..12af9afb52 100644
--- a/website/data/snippets/react/progress/circular.mdx
+++ b/website/data/snippets/react/progress/circular.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/progress/usage.mdx b/website/data/snippets/react/progress/usage.mdx
index 0fa6155c25..e5dad5c12d 100644
--- a/website/data/snippets/react/progress/usage.mdx
+++ b/website/data/snippets/react/progress/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/qr-code/usage.mdx b/website/data/snippets/react/qr-code/usage.mdx
index 33743a1ea7..519c05b7b6 100644
--- a/website/data/snippets/react/qr-code/usage.mdx
+++ b/website/data/snippets/react/qr-code/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as qrCode from "@zag-js/qr-code"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/radio-group/usage.mdx b/website/data/snippets/react/radio-group/usage.mdx
index bdf9eec90c..c25fefd192 100644
--- a/website/data/snippets/react/radio-group/usage.mdx
+++ b/website/data/snippets/react/radio-group/usage.mdx
@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import * as radio from "@zag-js/radio-group"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 const items = [
   { id: "apple", label: "Apples" },
@@ -10,7 +11,7 @@ const items = [
 ]
 
 function Radio() {
-  const service = useMachine(radio.machine, { id: "1" })
+  const service = useMachine(radio.machine, { id: useId() })
 
   const api = radio.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/range-slider/usage.mdx b/website/data/snippets/react/range-slider/usage.mdx
index d879f0916c..d7c78194af 100644
--- a/website/data/snippets/react/range-slider/usage.mdx
+++ b/website/data/snippets/react/range-slider/usage.mdx
@@ -1,10 +1,11 @@
-```jsx
+```tsx
 import * as slider from "@zag-js/slider"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function RangeSlider() {
   const service = useMachine(slider.machine, {
-    id: "1",
+    id: useId(),
     name: "quantity",
     defaultValue: [10, 60],
   })
diff --git a/website/data/snippets/react/rating-group/usage.mdx b/website/data/snippets/react/rating-group/usage.mdx
index b342119c90..67d54756ec 100644
--- a/website/data/snippets/react/rating-group/usage.mdx
+++ b/website/data/snippets/react/rating-group/usage.mdx
@@ -1,10 +1,11 @@
-```jsx
+```tsx
 import * as rating from "@zag-js/rating-group"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 import { HalfStar, Star } from "./icons"
 
 function Rating() {
-  const service = useMachine(rating.machine, { id: "1" })
+  const service = useMachine(rating.machine, { id: useId() })
 
   const api = rating.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/scroll-area/usage.mdx b/website/data/snippets/react/scroll-area/usage.mdx
index ef72599f7a..55791dd299 100644
--- a/website/data/snippets/react/scroll-area/usage.mdx
+++ b/website/data/snippets/react/scroll-area/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as scrollArea from "@zag-js/scroll-area"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/segmented-control/usage.mdx b/website/data/snippets/react/segmented-control/usage.mdx
index 23ba4232d5..b73cda30f8 100644
--- a/website/data/snippets/react/segmented-control/usage.mdx
+++ b/website/data/snippets/react/segmented-control/usage.mdx
@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import * as radio from "@zag-js/radio-group"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 const items = [
   { label: "React", value: "react" },
@@ -10,7 +11,7 @@ const items = [
 ]
 
 function Radio() {
-  const service = useMachine(radio.machine, { id: "1" })
+  const service = useMachine(radio.machine, { id: useId() })
 
   const api = radio.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/select/usage-with-form.mdx b/website/data/snippets/react/select/usage-with-form.mdx
index 8e5d68f00e..b28d804053 100644
--- a/website/data/snippets/react/select/usage-with-form.mdx
+++ b/website/data/snippets/react/select/usage-with-form.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as select from "@zag-js/select"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/select/usage.mdx b/website/data/snippets/react/select/usage.mdx
index 7c91bf1422..cb1a18d223 100644
--- a/website/data/snippets/react/select/usage.mdx
+++ b/website/data/snippets/react/select/usage.mdx
@@ -1,7 +1,7 @@
-```jsx
+```tsx
 import * as select from "@zag-js/select"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
-import { useId, useRef } from "react"
+import { useId } from "react"
 
 const selectData = [
   { label: "Nigeria", value: "NG" },
diff --git a/website/data/snippets/react/signature-pad/usage.mdx b/website/data/snippets/react/signature-pad/usage.mdx
index 08c6bdbb57..418cd5dc26 100644
--- a/website/data/snippets/react/signature-pad/usage.mdx
+++ b/website/data/snippets/react/signature-pad/usage.mdx
@@ -1,7 +1,7 @@
-```jsx
+```tsx
 import { normalizeProps, useMachine } from "@zag-js/react"
 import * as signaturePad from "@zag-js/signature-pad"
-import { useId, useState } from "react"
+import { useId } from "react"
 
 export function SignaturePad() {
   const service = useMachine(signaturePad.machine, {
diff --git a/website/data/snippets/react/slider/tick-marks.mdx b/website/data/snippets/react/slider/tick-marks.mdx
index 96065bb99e..a16879e636 100644
--- a/website/data/snippets/react/slider/tick-marks.mdx
+++ b/website/data/snippets/react/slider/tick-marks.mdx
@@ -1,4 +1,4 @@
-```jsx {11-15}
+```tsx {11-15}
 //...
 <div>
   <div {...api.getControlProps()}>
diff --git a/website/data/snippets/react/slider/usage.mdx b/website/data/snippets/react/slider/usage.mdx
index e0df24d6a3..9ae0f4b583 100644
--- a/website/data/snippets/react/slider/usage.mdx
+++ b/website/data/snippets/react/slider/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as slider from "@zag-js/slider"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function Slider() {
-  const service = useMachine(slider.machine, { id: "1", value: [0] })
+  const service = useMachine(slider.machine, { id: useId(), value: [0] })
 
   const api = slider.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/splitter/usage.mdx b/website/data/snippets/react/splitter/usage.mdx
index ae42320878..b9bf7df9f4 100644
--- a/website/data/snippets/react/splitter/usage.mdx
+++ b/website/data/snippets/react/splitter/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as splitter from "@zag-js/splitter"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
@@ -13,7 +13,7 @@ export function Splitter() {
     ],
   })
 
-  const api = slider.connect(service, normalizeProps)
+  const api = splitter.connect(service, normalizeProps)
 
   return (
     <div {...api.getRootProps()}>
diff --git a/website/data/snippets/react/steps/usage.mdx b/website/data/snippets/react/steps/usage.mdx
index 51cdaf4baa..f49c2e191a 100644
--- a/website/data/snippets/react/steps/usage.mdx
+++ b/website/data/snippets/react/steps/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as steps from "@zag-js/steps"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"
diff --git a/website/data/snippets/react/switch/usage.mdx b/website/data/snippets/react/switch/usage.mdx
index bc5f62365e..c3680497d9 100644
--- a/website/data/snippets/react/switch/usage.mdx
+++ b/website/data/snippets/react/switch/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as zagSwitch from "@zag-js/switch"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
-function Checkbox() {
-  const service = useMachine(zagSwitch.machine, { id: "1" })
+function Switch() {
+  const service = useMachine(zagSwitch.machine, { id: useId() })
 
   const api = zagSwitch.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/tabs/usage.mdx b/website/data/snippets/react/tabs/usage.mdx
index 151a05a466..5e2c3aa054 100644
--- a/website/data/snippets/react/tabs/usage.mdx
+++ b/website/data/snippets/react/tabs/usage.mdx
@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import * as tabs from "@zag-js/tabs"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 const data = [
   { value: "item-1", label: "Item one", content: "Item one content" },
@@ -9,7 +10,7 @@ const data = [
 ]
 
 export function Tabs() {
-  const service = useMachine(tabs.machine, { id: "1", defaultValue: "item-1" })
+  const service = useMachine(tabs.machine, { id: useId(), defaultValue: "item-1" })
 
   const api = tabs.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/tabs/with-indicator.mdx b/website/data/snippets/react/tabs/with-indicator.mdx
index 81fb9ba3cb..0c016efe71 100644
--- a/website/data/snippets/react/tabs/with-indicator.mdx
+++ b/website/data/snippets/react/tabs/with-indicator.mdx
@@ -1,4 +1,4 @@
-```jsx {13}
+```tsx {13}
 // ...
 return (
   <div {...api.getRootProps()}>
diff --git a/website/data/snippets/react/tags-input/usage.mdx b/website/data/snippets/react/tags-input/usage.mdx
index 2c233be47e..896662713d 100644
--- a/website/data/snippets/react/tags-input/usage.mdx
+++ b/website/data/snippets/react/tags-input/usage.mdx
@@ -1,10 +1,11 @@
-```jsx
+```tsx
 import * as tagsInput from "@zag-js/tags-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function TagsInput() {
   const service = useMachine(tagsInput.machine, {
-    id: "1",
+    id: useId(),
     value: ["React", "Vue"],
   })
 
diff --git a/website/data/snippets/react/timer/usage.mdx b/website/data/snippets/react/timer/usage.mdx
index c883b5926a..203d075156 100644
--- a/website/data/snippets/react/timer/usage.mdx
+++ b/website/data/snippets/react/timer/usage.mdx
@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import { normalizeProps, useMachine } from "@zag-js/react"
 import * as timer from "@zag-js/timer"
+import { useId } from "react"
 
 export function Countdown() {
   const service = useMachine(timer.machine, {
diff --git a/website/data/snippets/react/toast/usage.mdx b/website/data/snippets/react/toast/usage.mdx
index d45c336278..af1be280ba 100644
--- a/website/data/snippets/react/toast/usage.mdx
+++ b/website/data/snippets/react/toast/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import { useMachine, normalizeProps } from "@zag-js/react"
 import * as toast from "@zag-js/toast"
 import { useId } from "react"
diff --git a/website/data/snippets/react/toast/using-portal.mdx b/website/data/snippets/react/toast/using-portal.mdx
index c88591ebc9..7f0887dc13 100644
--- a/website/data/snippets/react/toast/using-portal.mdx
+++ b/website/data/snippets/react/toast/using-portal.mdx
@@ -1,4 +1,4 @@
-```jsx {1,12,14}
+```tsx {1,12,14}
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import * as toast from "@zag-js/toast"
 
diff --git a/website/data/snippets/react/toc/usage.mdx b/website/data/snippets/react/toc/usage.mdx
index 67716cf2e9..04dd471cc6 100644
--- a/website/data/snippets/react/toc/usage.mdx
+++ b/website/data/snippets/react/toc/usage.mdx
@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import * as toc from "@zag-js/toc"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 const items = [
   { value: "introduction", depth: 2 },
@@ -10,7 +11,7 @@ const items = [
 ]
 
 export function TableOfContents() {
-  const service = useMachine(toc.machine, { id: "1", items })
+  const service = useMachine(toc.machine, { id: useId(), items })
 
   const api = toc.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/react/toggle-group/usage.mdx b/website/data/snippets/react/toggle-group/usage.mdx
index e934390617..b0db3462c3 100644
--- a/website/data/snippets/react/toggle-group/usage.mdx
+++ b/website/data/snippets/react/toggle-group/usage.mdx
@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import { normalizeProps, useMachine } from "@zag-js/react"
 import * as toggle from "@zag-js/toggle-group"
 import { useId } from "react"
diff --git a/website/data/snippets/react/tooltip/usage.mdx b/website/data/snippets/react/tooltip/usage.mdx
index d1c0c9365c..18e334407e 100644
--- a/website/data/snippets/react/tooltip/usage.mdx
+++ b/website/data/snippets/react/tooltip/usage.mdx
@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as tooltip from "@zag-js/tooltip"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function Tooltip() {
-  const service = useMachine(tooltip.machine, { id: "1" })
+  const service = useMachine(tooltip.machine, { id: useId() })
 
   const api = tooltip.connect(service, normalizeProps)
 
diff --git a/website/data/snippets/solid/avatar/usage.mdx b/website/data/snippets/solid/avatar/usage.mdx
index c2dac1d9bd..b57876ae25 100644
--- a/website/data/snippets/solid/avatar/usage.mdx
+++ b/website/data/snippets/solid/avatar/usage.mdx
@@ -1,9 +1,10 @@
 ```jsx
 import * as avatar from "@zag-js/avatar"
 import { useMachine, normalizeProps } from "@zag-js/solid"
+import { createMemo, createUniqueId } from "solid-js"
 
 function Avatar() {
-  const service = useMachine(avatar.machine, { id: "1" })
+  const service = useMachine(avatar.machine, { id: createUniqueId() })
 
   const api = createMemo(() => avatar.connect(service, normalizeProps))
 
diff --git a/website/data/snippets/solid/date-input/usage.mdx b/website/data/snippets/solid/date-input/usage.mdx
index 94a16500df..df28fb6f03 100644
--- a/website/data/snippets/solid/date-input/usage.mdx
+++ b/website/data/snippets/solid/date-input/usage.mdx
@@ -1,12 +1,12 @@
 ```jsx
 import * as dateInput from "@zag-js/date-input"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { createUniqueId } from "solid-js"
+import { createMemo, createUniqueId } from "solid-js"
 
 function DateInput() {
   const service = useMachine(dateInput.machine, { id: createUniqueId() })
 
-  const api = () => dateInput.connect(service(), normalizeProps)
+  const api = createMemo(() => dateInput.connect(service, normalizeProps))
 
   return (
     <div {...api().getRootProps()}>
diff --git a/website/data/snippets/solid/date-picker/usage.mdx b/website/data/snippets/solid/date-picker/usage.mdx
index 17973e0daa..3d8fd22a23 100644
--- a/website/data/snippets/solid/date-picker/usage.mdx
+++ b/website/data/snippets/solid/date-picker/usage.mdx
@@ -1,7 +1,8 @@
 ```jsx
 import * as datepicker from "@zag-js/date-picker"
 import { useMachine, normalizeProps } from "@zag-js/solid"
-import { createMemo, createUniqueId, Portal } from "solid-js"
+import { createMemo, createUniqueId } from "solid-js"
+import { Portal } from "solid-js/web"
 
 function DatePicker() {
   const service = useMachine(datepicker.machine, { id: createUniqueId() })
diff --git a/website/data/snippets/solid/drawer/usage.mdx b/website/data/snippets/solid/drawer/usage.mdx
index e49e44ad72..438a0ceb46 100644
--- a/website/data/snippets/solid/drawer/usage.mdx
+++ b/website/data/snippets/solid/drawer/usage.mdx
@@ -1,12 +1,12 @@
 ```tsx
 import * as drawer from "@zag-js/drawer"
 import { useMachine, normalizeProps } from "@zag-js/solid"
-import { createUniqueId } from "solid-js"
+import { createMemo, createUniqueId } from "solid-js"
 
 export function Drawer() {
   const service = useMachine(drawer.machine, { id: createUniqueId() })
 
-  const api = drawer.connect(service, normalizeProps)
+  const api = createMemo(() => drawer.connect(service, normalizeProps))
 
   return (
     <>
diff --git a/website/data/snippets/solid/hover-card/usage.mdx b/website/data/snippets/solid/hover-card/usage.mdx
index 8fd6653bd7..666794d9a4 100644
--- a/website/data/snippets/solid/hover-card/usage.mdx
+++ b/website/data/snippets/solid/hover-card/usage.mdx
@@ -5,9 +5,9 @@ import { createMemo, createUniqueId, Show } from "solid-js"
 import { Portal } from "solid-js/web"
 
 function Checkbox() {
-  const service = useMachine(hoverCard.machine, { id: "1" })
+  const service = useMachine(hoverCard.machine, { id: createUniqueId() })
 
-  const api = hoverCard.connect(service, normalizeProps)
+  const api = createMemo(() => hoverCard.connect(service, normalizeProps))
 
   return (
     <>
diff --git a/website/data/snippets/solid/presence/usage.mdx b/website/data/snippets/solid/presence/usage.mdx
index 5691239389..130ded6f96 100644
--- a/website/data/snippets/solid/presence/usage.mdx
+++ b/website/data/snippets/solid/presence/usage.mdx
@@ -1,7 +1,7 @@
 ```tsx
 import * as presence from "@zag-js/presence"
 import { useMachine, normalizeProps } from "@zag-js/solid"
-import { createMemo, createUniqueId, JSX } from "solid-js"
+import { createMemo, createUniqueId, splitProps, Show, JSX } from "solid-js"
 
 interface PresenceProps {
   present: boolean
diff --git a/website/data/snippets/solid/progress/circular.mdx b/website/data/snippets/solid/progress/circular.mdx
index 6f64f8b81f..cfb3e440b5 100644
--- a/website/data/snippets/solid/progress/circular.mdx
+++ b/website/data/snippets/solid/progress/circular.mdx
@@ -4,7 +4,7 @@ import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
 
 function Progress() {
-  const service = useMachine(progress.machine, { id: useId() })
+  const service = useMachine(progress.machine, { id: createUniqueId() })
 
   const api = createMemo(() => progress.connect(service, normalizeProps))
 
diff --git a/website/data/snippets/solid/progress/usage.mdx b/website/data/snippets/solid/progress/usage.mdx
index 35316a4177..aa3b105403 100644
--- a/website/data/snippets/solid/progress/usage.mdx
+++ b/website/data/snippets/solid/progress/usage.mdx
@@ -4,7 +4,7 @@ import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
 
 function Progress() {
-  const service = useMachine(progress.machine, { id: useId() })
+  const service = useMachine(progress.machine, { id: createUniqueId() })
 
   const api = createMemo(() => progress.connect(service, normalizeProps))
 
diff --git a/website/data/snippets/solid/select/usage-with-form.mdx b/website/data/snippets/solid/select/usage-with-form.mdx
index ff7743d82f..a3d20a337e 100644
--- a/website/data/snippets/solid/select/usage-with-form.mdx
+++ b/website/data/snippets/solid/select/usage-with-form.mdx
@@ -2,6 +2,7 @@
 import * as select from "@zag-js/select"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
+import { Portal } from "solid-js/web"
 
 const selectData = [
   { label: "Nigeria", value: "NG" },
@@ -10,15 +11,13 @@ const selectData = [
 ]
 
 export function SelectWithForm() {
-  const service = useMachine(
-    select.machine, ({
-      collection: select.collection({
-        items: selectData,
-      }),
-      id: createUniqueId(),
-      name: "country",
+  const service = useMachine(select.machine, {
+    collection: select.collection({
+      items: selectData,
     }),
-  )Ø
+    id: createUniqueId(),
+    name: "country",
+  })
 
   const api = createMemo(() => select.connect(service, normalizeProps))
 
diff --git a/website/data/snippets/solid/switch/usage.mdx b/website/data/snippets/solid/switch/usage.mdx
index 8c1f1a2a3c..a0b780509c 100644
--- a/website/data/snippets/solid/switch/usage.mdx
+++ b/website/data/snippets/solid/switch/usage.mdx
@@ -4,7 +4,7 @@ import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
 
 function Checkbox() {
-  const service = useMachine(zagSwitch.machine, { id: "1" })
+  const service = useMachine(zagSwitch.machine, { id: createUniqueId() })
 
   const api = createMemo(() => zagSwitch.connect(service, normalizeProps))
 
diff --git a/website/data/snippets/svelte/angle-slider/tick-marks.mdx b/website/data/snippets/svelte/angle-slider/tick-marks.mdx
index 3dbafb9fb4..2922dd9e50 100644
--- a/website/data/snippets/svelte/angle-slider/tick-marks.mdx
+++ b/website/data/snippets/svelte/angle-slider/tick-marks.mdx
@@ -6,9 +6,9 @@
   <div {...api.getControlProps()}>
     <div {...api.getThumbProps()}></div>
     <div {...api.getMarkerGroupProps()}>
-      {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
-        <div key={value} {...api.getMarkerProps({ value })}></div>
-      ))}
+      {#each [0, 45, 90, 135, 180, 225, 270, 315] as value}
+        <div {...api.getMarkerProps({ value })}></div>
+      {/each}
     </div>
   </div>
   <div {...api.getValueTextProps()}>{api.value} degrees</div>
diff --git a/website/data/snippets/svelte/clipboard/usage.mdx b/website/data/snippets/svelte/clipboard/usage.mdx
index 1ca87051c6..eeff8b36bf 100644
--- a/website/data/snippets/svelte/clipboard/usage.mdx
+++ b/website/data/snippets/svelte/clipboard/usage.mdx
@@ -1,9 +1,8 @@
 ```svelte
 <script lang="ts">
   import * as clipboard from "@zag-js/clipboard"
-  import { useMachine, normalizeProps } from "@zag-js/react"
+  import { useMachine, normalizeProps } from "@zag-js/svelte"
   import { ClipboardCheck, ClipboardCopyIcon } from "lucide-svelte"
-  import { useId } from "react"
 
   const id = $props.id()
   const service = useMachine(
@@ -21,7 +20,11 @@
   <div {...api.getControlProps()}>
     <input {...api.getInputProps()} />
     <button {...api.getTriggerProps()}>
-      {api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
+      {#if api.copied}
+        <ClipboardCheck />
+      {:else}
+        <ClipboardCopyIcon />
+      {/if}
     </button>
   </div>
 </div>
diff --git a/website/data/snippets/svelte/date-input/usage.mdx b/website/data/snippets/svelte/date-input/usage.mdx
index 469e503171..c1d68a36bb 100644
--- a/website/data/snippets/svelte/date-input/usage.mdx
+++ b/website/data/snippets/svelte/date-input/usage.mdx
@@ -1,25 +1,26 @@
 ```svelte
-<script>
+<script lang="ts">
   import * as dateInput from "@zag-js/date-input"
-  import { useMachine } from "@zag-js/svelte"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(dateInput.machine())
-  const api = dateInput.connect(service, $service)
+  const id = $props.id()
+  const service = useMachine(dateInput.machine, ({ id }))
+  const api = $derived(dateInput.connect(service, normalizeProps))
 </script>
 
-<div use:api.getRootProps>
-  <label use:api.getLabelProps>Enter a date</label>
+<div {...api.getRootProps()}>
+  <label {...api.getLabelProps()}>Enter a date</label>
 
-  <div use:api.getControlProps>
-    <div use:api.getSegmentGroupProps>
-      {#each api.getSegments() as segment, i (i)}
-        <span use:api.getSegmentProps={{ segment }}>
+  <div {...api.getControlProps()}>
+    <div {...api.getSegmentGroupProps()}>
+      {#each api.getSegments() as segment, i}
+        <span {...api.getSegmentProps({ segment })}>
           {segment.text}
         </span>
       {/each}
     </div>
   </div>
 
-  <input use:api.getHiddenInputProps />
+  <input {...api.getHiddenInputProps()} />
 </div>
 ```
diff --git a/website/data/snippets/svelte/navigation-menu/controlled.mdx b/website/data/snippets/svelte/navigation-menu/controlled.mdx
index 713e240dae..3830ad9f59 100644
--- a/website/data/snippets/svelte/navigation-menu/controlled.mdx
+++ b/website/data/snippets/svelte/navigation-menu/controlled.mdx
@@ -1,21 +1,23 @@
 ```svelte {3,5-10}
 <script lang="ts">
-  import { writable } from "svelte/store"
-
-  const value = writable("")
+  let value = $state("")
 
   const service = useMachine(navigationMenu.machine, {
     id: "nav",
-    value: $value,
-    onValueChange: (details) => value.set(details.value),
+    get value() {
+      return value
+    },
+    onValueChange(details) {
+      value = details.value
+    },
   })
 
   const api = $derived(navigationMenu.connect(service, normalizeProps))
 </script>
 
 <div>
-  <button on:click={() => value.set("products")}>Open Products</button>
-  <button on:click={() => value.set("")}>Close All</button>
+  <button onclick={() => value = "products"}>Open Products</button>
+  <button onclick={() => value = ""}>Close All</button>
 
   <nav {...api.getRootProps()}>
     <!-- ... navigation items ... -->
diff --git a/website/data/snippets/vue/clipboard/usage.mdx b/website/data/snippets/vue/clipboard/usage.mdx
index 0ae70301c3..292fabf197 100644
--- a/website/data/snippets/vue/clipboard/usage.mdx
+++ b/website/data/snippets/vue/clipboard/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as clipboard from "@zag-js/clipboard"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { ClipboardCheck, ClipboardCopyIcon } from "lucide-vue-next"
   import { computed } from "vue"
 
diff --git a/website/data/snippets/vue/date-input/usage.mdx b/website/data/snippets/vue/date-input/usage.mdx
index 23852711a6..4d7aa7f66b 100644
--- a/website/data/snippets/vue/date-input/usage.mdx
+++ b/website/data/snippets/vue/date-input/usage.mdx
@@ -1,12 +1,12 @@
-```vue
+```html
 <script setup>
-import * as dateInput from "@zag-js/date-input"
-import { useMachine, normalizeProps } from "@zag-js/vue"
-import { computed } from "vue"
+  import * as dateInput from "@zag-js/date-input"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
+  import { computed } from "vue"
 
-const service = useMachine(dateInput.machine)
+  const service = useMachine(dateInput.machine, { id: "1" })
 
-const api = computed(() => dateInput.connect(service, normalizeProps))
+  const api = computed(() => dateInput.connect(service, normalizeProps))
 </script>
 
 <template>
diff --git a/website/data/snippets/vue/drawer/usage.mdx b/website/data/snippets/vue/drawer/usage.mdx
index 21c9e06a4a..0cc0dd3e05 100644
--- a/website/data/snippets/vue/drawer/usage.mdx
+++ b/website/data/snippets/vue/drawer/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as drawer from "@zag-js/drawer"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { useId, computed } from "vue"
 
   const service = useMachine(drawer.machine, { id: useId() })
diff --git a/website/data/snippets/vue/floating-panel/usage.mdx b/website/data/snippets/vue/floating-panel/usage.mdx
index 72e4788168..15aa23c49e 100644
--- a/website/data/snippets/vue/floating-panel/usage.mdx
+++ b/website/data/snippets/vue/floating-panel/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as floatingPanel from "@zag-js/floating-panel"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed, useId } from "vue"
   import { Minus, Maximize2, ArrowDownLeft, XIcon } from "lucide-vue-next"
 
diff --git a/website/data/snippets/vue/listbox/grid-usage.mdx b/website/data/snippets/vue/listbox/grid-usage.mdx
index ff1a2a7655..3149b58586 100644
--- a/website/data/snippets/vue/listbox/grid-usage.mdx
+++ b/website/data/snippets/vue/listbox/grid-usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup lang="ts">
   import * as listbox from "@zag-js/listbox"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed, useId } from "vue"
 
   const data = [
diff --git a/website/data/snippets/vue/listbox/usage.mdx b/website/data/snippets/vue/listbox/usage.mdx
index 03921964eb..02b8252e3b 100644
--- a/website/data/snippets/vue/listbox/usage.mdx
+++ b/website/data/snippets/vue/listbox/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup lang="ts">
   import * as listbox from "@zag-js/listbox"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed, useId } from "vue"
 
   const data = [
diff --git a/website/data/snippets/vue/marquee/usage.mdx b/website/data/snippets/vue/marquee/usage.mdx
index 74cfe48954..07a3e39b03 100644
--- a/website/data/snippets/vue/marquee/usage.mdx
+++ b/website/data/snippets/vue/marquee/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as marquee from "@zag-js/marquee"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed } from "vue"
 
   const logos = [
diff --git a/website/data/snippets/vue/navigation-menu/controlled.mdx b/website/data/snippets/vue/navigation-menu/controlled.mdx
index 2e615fd7f7..0dbd1baf8a 100644
--- a/website/data/snippets/vue/navigation-menu/controlled.mdx
+++ b/website/data/snippets/vue/navigation-menu/controlled.mdx
@@ -1,18 +1,18 @@
 ```html {4,6-11}
 <script setup lang="ts">
-import { ref, computed } from "vue"
+  import { ref, computed } from "vue"
 
-const value = ref("")
+  const value = ref("")
 
-const service = useMachine(navigationMenu.machine, {
-  id: "nav",
-  value: value.value,
-  onValueChange(details) {
-    value.value = details.value
-  },
-})
+  const service = useMachine(navigationMenu.machine, {
+    id: "nav",
+    value: value.value,
+    onValueChange(details) {
+      value.value = details.value
+    },
+  })
 
-const api = computed(() => navigationMenu.connect(service, normalizeProps))
+  const api = computed(() => navigationMenu.connect(service, normalizeProps))
 </script>
 
 <template>
diff --git a/website/data/snippets/vue/navigation-menu/usage.mdx b/website/data/snippets/vue/navigation-menu/usage.mdx
index e39048a0e6..89d3f6680f 100644
--- a/website/data/snippets/vue/navigation-menu/usage.mdx
+++ b/website/data/snippets/vue/navigation-menu/usage.mdx
@@ -1,11 +1,11 @@
 ```html
 <script setup lang="ts">
-import * as navigationMenu from "@zag-js/navigation-menu"
-import { useMachine, normalizeProps } from "@zag-js/vue"
-import { computed } from "vue"
+  import * as navigationMenu from "@zag-js/navigation-menu"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
+  import { computed } from "vue"
 
-const service = useMachine(navigationMenu.machine, { id: "nav" })
-const api = computed(() => navigationMenu.connect(service, normalizeProps))
+  const service = useMachine(navigationMenu.machine, { id: "nav" })
+  const api = computed(() => navigationMenu.connect(service, normalizeProps))
 </script>
 
 <template>
diff --git a/website/data/snippets/vue/navigation-menu/viewport-usage.mdx b/website/data/snippets/vue/navigation-menu/viewport-usage.mdx
index 204761ac60..d5452a0932 100644
--- a/website/data/snippets/vue/navigation-menu/viewport-usage.mdx
+++ b/website/data/snippets/vue/navigation-menu/viewport-usage.mdx
@@ -1,11 +1,11 @@
 ```html
 <script setup lang="ts">
-import * as navigationMenu from "@zag-js/navigation-menu"
-import { useMachine, normalizeProps } from "@zag-js/vue"
-import { computed } from "vue"
+  import * as navigationMenu from "@zag-js/navigation-menu"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
+  import { computed } from "vue"
 
-const service = useMachine(navigationMenu.machine, { id: "nav" })
-const api = computed(() => navigationMenu.connect(service, normalizeProps))
+  const service = useMachine(navigationMenu.machine, { id: "nav" })
+  const api = computed(() => navigationMenu.connect(service, normalizeProps))
 </script>
 
 <template>
diff --git a/website/data/snippets/vue/password-input/usage.mdx b/website/data/snippets/vue/password-input/usage.mdx
index a59b01b943..d6b7dba515 100644
--- a/website/data/snippets/vue/password-input/usage.mdx
+++ b/website/data/snippets/vue/password-input/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as passwordInput from "@zag-js/password-input"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed, useId } from "vue"
   import { EyeIcon, EyeOffIcon } from "lucide-vue-next"
 
diff --git a/website/data/snippets/vue/scroll-area/usage.mdx b/website/data/snippets/vue/scroll-area/usage.mdx
index 87a1ff6857..b93eecc88c 100644
--- a/website/data/snippets/vue/scroll-area/usage.mdx
+++ b/website/data/snippets/vue/scroll-area/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as scrollArea from "@zag-js/scroll-area"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed, useId } from "vue"
 
   const service = useMachine(scrollArea.machine, { id: useId() })
diff --git a/website/data/snippets/vue/signature-pad/usage.mdx b/website/data/snippets/vue/signature-pad/usage.mdx
index 7f1a252dff..b5c703ce65 100644
--- a/website/data/snippets/vue/signature-pad/usage.mdx
+++ b/website/data/snippets/vue/signature-pad/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as signaturePad from "@zag-js/signature-pad"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed } from "vue"
 
   const service = useMachine(signaturePad.machine, { id: "1" })
diff --git a/website/data/snippets/vue/steps/usage.mdx b/website/data/snippets/vue/steps/usage.mdx
index d0bce09c1f..3715205794 100644
--- a/website/data/snippets/vue/steps/usage.mdx
+++ b/website/data/snippets/vue/steps/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup>
   import * as steps from "@zag-js/steps"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { computed } from "vue"
 
   const stepsData = [
diff --git a/website/data/snippets/vue/tour/usage.mdx b/website/data/snippets/vue/tour/usage.mdx
index f2fe43cee2..defe1e02e6 100644
--- a/website/data/snippets/vue/tour/usage.mdx
+++ b/website/data/snippets/vue/tour/usage.mdx
@@ -1,7 +1,7 @@
 ```html
 <script setup lang="ts">
   import * as tour from "@zag-js/tour"
-  import { useMachine, normalizeProps } from "@zag-js/vue"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
   import { useId, computed, Teleport } from "vue"
 
   const steps: tour.StepDetails[] = [