diff --git a/bun.lockb b/bun.lockb
index 3533af74a6..977c17a17c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index db6cabc4ea..4973049369 100644
--- a/package.json
+++ b/package.json
@@ -1,39 +1,45 @@
 {
-	"name": "root",
-	"type": "module",
-	"private": true,
-	"workspaces": ["packages/*", "scripts", "website"],
-	"scripts": {
-		"postinstall": "lefthook install",
-		"build": "turbo run build --filter='!./templates/**' --filter='!./website/**'",
-		"exports:check": "bun scripts check:exports",
-		"exports:sync": "bun scripts exports:sync",
-		"local:sync": "bun scripts local:sync",
-		"local:revert": "bun scripts local:sync --revert",
-		"format": "bun prettier --write .",
-		"lint": "turbo run lint",
-		"test": "turbo run test:ci",
-		"typecheck": "turbo run typecheck",
-		"react": "bun run --cwd packages/react",
-		"scripts": "bun run --cwd scripts",
-		"solid": "bun run --cwd packages/solid",
-		"svelte": "bun run --cwd packages/svelte",
-		"vue": "bun run --cwd packages/vue",
-		"web": "bun run --cwd website"
-	},
-	"dependencies": {
-		"root": "."
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@types/bun": "1.1.14",
-		"lefthook": "1.10.1",
-		"prettier": "3.4.2",
-		"prettier-plugin-svelte": "3.3.2",
-		"turbo": "2.3.3",
-		"typescript": "5.7.2",
-		"vercel": "39.2.6"
-	},
-	"packageManager": "bun@1.1.42",
-	"trustedDependencies": ["@ark-ui/website"]
+  "name": "root",
+  "type": "module",
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "scripts",
+    "website"
+  ],
+  "scripts": {
+    "postinstall": "lefthook install",
+    "build": "turbo run build --filter='!./templates/**' --filter='!./website/**'",
+    "exports:check": "bun scripts check:exports",
+    "exports:sync": "bun scripts exports:sync",
+    "local:sync": "bun scripts local:sync",
+    "local:revert": "bun scripts local:sync --revert",
+    "format": "bun prettier --write .",
+    "lint": "turbo run lint",
+    "test": "turbo run test:ci",
+    "typecheck": "turbo run typecheck",
+    "react": "bun run --cwd packages/react",
+    "scripts": "bun run --cwd scripts",
+    "solid": "bun run --cwd packages/solid",
+    "svelte": "bun run --cwd packages/svelte",
+    "vue": "bun run --cwd packages/vue",
+    "web": "bun run --cwd website"
+  },
+  "dependencies": {
+    "root": "."
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/bun": "1.1.14",
+    "lefthook": "1.10.1",
+    "prettier": "3.4.2",
+    "prettier-plugin-svelte": "3.3.2",
+    "turbo": "2.3.3",
+    "typescript": "5.7.2",
+    "vercel": "39.2.6"
+  },
+  "packageManager": "bun@1.1.42",
+  "trustedDependencies": [
+    "@ark-ui/website"
+  ]
 }
diff --git a/packages/react/.storybook/main.css b/packages/react/.storybook/main.css
index fdf555c40e..1b4c3e8686 100644
--- a/packages/react/.storybook/main.css
+++ b/packages/react/.storybook/main.css
@@ -33,4 +33,5 @@
 @import url('./styles/toast.css');
 @import url('./styles/toggle-group.css');
 @import url('./styles/tooltip.css');
+@import url('./styles/tour.css');
 @import url('./styles/tree-view.css');
diff --git a/packages/react/.storybook/styles/tour.css b/packages/react/.storybook/styles/tour.css
new file mode 100644
index 0000000000..e5fb7d0890
--- /dev/null
+++ b/packages/react/.storybook/styles/tour.css
@@ -0,0 +1,138 @@
+[data-scope='tour'][data-part='positioner'][data-type='floating'] {
+  position: absolute;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='bottom'] {
+  bottom: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='top'] {
+  top: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='end'] {
+  inset-inline-end: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='start'] {
+  inset-inline-start: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='dialog'] {
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='tour'][data-part='content'] {
+  --arrow-background: white;
+  --arrow-size: 10px;
+  background: white;
+  padding: 24px;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+}
+
+[data-scope='tour'][data-part='content'][data-type='dialog'] {
+  width: 500px;
+  background: lightblue;
+}
+
+[data-scope='tour'][data-part='content'][data-type='floating'] {
+  width: 500px;
+  background: rgb(15, 39, 136);
+  color: white;
+}
+
+[data-scope='tour'][data-part='arrow'] {
+  --arrow-background: white;
+  --arrow-shadow-color: #ebebeb;
+  box-shadow: var(--box-shadow);
+}
+
+[data-scope='tour'][data-part='title'] {
+  font-weight: 600;
+}
+
+[data-scope='tour'][data-part='description'] {
+  margin-bottom: 20px;
+}
+
+[data-scope='tour'][data-part='progress-text'] {
+  margin-bottom: 20px;
+  opacity: 0.72;
+}
+
+[data-scope='tour'][data-part='backdrop'] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+[data-scope='tour'][data-part='spotlight'] {
+  border: 3px solid pink;
+}
+
+[data-scope='tour'][data-part='close-trigger'] {
+  font-family: inherit;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.tour.button__group {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.tour .steps__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 50vh;
+}
+
+.tour .overflow__container {
+  width: 500px;
+  height: 400px;
+  max-height: 200px;
+  overflow: auto;
+  border: 2px solid teal;
+  position: relative;
+}
+
+.tour .overflow__container::before {
+  content: 'Overflow';
+  display: block;
+  position: sticky;
+  background-color: teal;
+  color: white;
+  padding: 2px 4px 3px;
+  top: 0px;
+}
+
+.tour .overflow__container .h-200px {
+  height: 200px;
+}
+
+.tour .overflow__container .h-100px {
+  height: 100px;
+}
+
+body {
+  position: relative;
+}
+
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 19325ef70f..327d0a00bb 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -187,8 +187,8 @@
     "@zag-js/dom-query": "0.81.1",
     "@zag-js/editable": "0.81.1",
     "@zag-js/file-upload": "0.81.1",
-    "@zag-js/focus-trap": "0.81.1",
     "@zag-js/file-utils": "0.81.1",
+    "@zag-js/focus-trap": "0.81.1",
     "@zag-js/highlight-word": "0.81.1",
     "@zag-js/hover-card": "0.81.1",
     "@zag-js/i18n-utils": "0.81.1",
@@ -216,6 +216,7 @@
     "@zag-js/toast": "0.81.1",
     "@zag-js/toggle-group": "0.81.1",
     "@zag-js/tooltip": "0.81.1",
+    "@zag-js/tour": "0.81.1",
     "@zag-js/tree-view": "0.81.1",
     "@zag-js/types": "0.81.1"
   },
diff --git a/packages/react/src/components/focus-trap/examples/autofocus.tsx b/packages/react/src/components/focus-trap/examples/autofocus.tsx
index b2e14fae78..20cf895b6a 100644
--- a/packages/react/src/components/focus-trap/examples/autofocus.tsx
+++ b/packages/react/src/components/focus-trap/examples/autofocus.tsx
@@ -20,7 +20,12 @@ export const Autofocus = () => {
       {trapped && (
         <FocusTrap disabled={!trapped} setReturnFocus={getButtonNode}>
           <div
-            style={{ display: 'flex', flexDirection: 'column', gap: '1rem', paddingBlock: '1rem' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1rem',
+              paddingBlock: '1rem',
+            }}
           >
             <input type="text" placeholder="Regular input" />
             {/* biome-ignore lint/a11y/noAutofocus: <explanation> */}
diff --git a/packages/react/src/components/focus-trap/examples/basic.tsx b/packages/react/src/components/focus-trap/examples/basic.tsx
index 1a625d4724..7a95741e6b 100644
--- a/packages/react/src/components/focus-trap/examples/basic.tsx
+++ b/packages/react/src/components/focus-trap/examples/basic.tsx
@@ -8,7 +8,12 @@ export const Basic = () => {
       <button onClick={() => setTrapped(true)}>Start Trap</button>
       <FocusTrap returnFocusOnDeactivate={false} disabled={!trapped}>
         <div
-          style={{ display: 'flex', flexDirection: 'column', gap: '1rem', paddingBlock: '1rem' }}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            paddingBlock: '1rem',
+          }}
         >
           <input type="text" placeholder="input" />
           <textarea placeholder="textarea" />
diff --git a/packages/react/src/components/focus-trap/examples/initial-focus.tsx b/packages/react/src/components/focus-trap/examples/initial-focus.tsx
index e3c116a7f7..3d36d1cf8a 100644
--- a/packages/react/src/components/focus-trap/examples/initial-focus.tsx
+++ b/packages/react/src/components/focus-trap/examples/initial-focus.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useRef, useState } from 'react'
 import { FocusTrap } from '../focus-trap'
 
 export const InitialFocus = () => {
@@ -12,7 +12,12 @@ export const InitialFocus = () => {
       <button onClick={toggle}>{trapped ? 'End Trap' : 'Start Trap'}</button>
       <FocusTrap disabled={!trapped} initialFocus={() => inputRef.current}>
         <div
-          style={{ display: 'flex', flexDirection: 'column', gap: '1rem', paddingBlock: '1rem' }}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            paddingBlock: '1rem',
+          }}
         >
           <input type="text" placeholder="First input" />
           <input ref={inputRef} type="text" placeholder="Second input (initial focus)" />
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 68f8cbd4ee..db6b5dac19 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -44,4 +44,5 @@ export * from './toast'
 export * from './toggle'
 export * from './toggle-group'
 export * from './tooltip'
+export * from './tour'
 export * from './tree-view'
diff --git a/packages/react/src/components/tour/examples/basic.tsx b/packages/react/src/components/tour/examples/basic.tsx
new file mode 100644
index 0000000000..d17fbe8645
--- /dev/null
+++ b/packages/react/src/components/tour/examples/basic.tsx
@@ -0,0 +1,29 @@
+import { Frame } from '@ark-ui/react/frame'
+import { DemoTour } from './tour'
+
+export const Basic = () => {
+  return (
+    <main>
+      <DemoTour />
+      <div className="tour">
+        <div className="steps__container">
+          <h3 id="step-1">Step 1</h3>
+          <div className="overflow__container">
+            <div className="h-200px" />
+            <h3 id="step-2">Step 2</h3>
+            <div className="h-100px" />
+          </div>
+          <Frame>
+            <h1 id="step-2a">Iframe Content</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+          </Frame>
+          <h3 id="step-3">Step 3</h3>
+          <h3 id="step-4">Step 4</h3>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/packages/react/src/components/tour/examples/steps.tsx b/packages/react/src/components/tour/examples/steps.tsx
new file mode 100644
index 0000000000..b3005969e7
--- /dev/null
+++ b/packages/react/src/components/tour/examples/steps.tsx
@@ -0,0 +1,90 @@
+import type { TourStepDetails } from '@ark-ui/react/tour'
+
+export const steps: TourStepDetails[] = [
+  {
+    type: 'dialog',
+    id: 'step-0',
+    title: 'Centered tour (no target)',
+    description: 'This is the center of the world. Ready to start the tour?',
+    actions: [{ label: 'Next', action: 'next' }],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-1',
+    title: 'Step 1. Welcome',
+    description: 'To the new world',
+    target: () => document.querySelector<HTMLElement>('#step-1'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+    effect({ show, update }) {
+      const abort = new AbortController()
+
+      fetch('https://api.github.com/users/octocat', { signal: abort.signal })
+        .then((res) => res.json())
+        .then((data) => {
+          update({ title: data.name })
+          show()
+        })
+
+      return () => {
+        abort.abort()
+      }
+    },
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#step-2'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2a',
+    title: 'Step 2a. Inside an Iframe container',
+    description: 'It calculates the offset rect correctly. Thanks to floating UI!',
+    target: () => {
+      const [frameEl] = Array.from(frames)
+      return frameEl?.document.querySelector<HTMLElement>('#step-2a')
+    },
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-3',
+    title: 'Step 3. Normal scrolling',
+    description: 'The new world is a great place',
+    target: () => document.querySelector<HTMLElement>('#step-3'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-4',
+    title: 'Step 4. Close to bottom',
+    description: 'So nice to see the scrolling works!',
+    target: () => document.querySelector<HTMLElement>('#step-4'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'dialog',
+    id: 'step-5',
+    title: "You're all sorted! (no target)",
+    description: 'Thanks for trying out the tour. Enjoy the app!',
+    actions: [{ label: 'Finish', action: 'dismiss' }],
+  },
+]
diff --git a/packages/react/src/components/tour/examples/tour.tsx b/packages/react/src/components/tour/examples/tour.tsx
new file mode 100644
index 0000000000..5be93cbac4
--- /dev/null
+++ b/packages/react/src/components/tour/examples/tour.tsx
@@ -0,0 +1,44 @@
+import { Portal } from '@ark-ui/react/portal'
+import { Tour, useTour } from '@ark-ui/react/tour'
+import { XIcon } from 'lucide-react'
+import { useEffect } from 'react'
+import { steps } from './steps'
+
+export const DemoTour = () => {
+  const tour = useTour({ steps })
+
+  // Start the tour when the component mounts
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    tour.start()
+  }, [])
+
+  return (
+    <Tour.Root tour={tour}>
+      <Portal>
+        <Tour.Backdrop />
+        <Tour.Spotlight />
+        <Tour.Positioner>
+          <Tour.Content>
+            <Tour.Arrow>
+              <Tour.ArrowTip />
+            </Tour.Arrow>
+            <Tour.Title />
+            <Tour.Description />
+            <Tour.ProgressText />
+            <Tour.CloseTrigger>
+              <XIcon />
+            </Tour.CloseTrigger>
+            <Tour.Control>
+              <Tour.Actions>
+                {(actions) =>
+                  actions.map((action) => <Tour.ActionTrigger key={action.label} action={action} />)
+                }
+              </Tour.Actions>
+            </Tour.Control>
+          </Tour.Content>
+        </Tour.Positioner>
+      </Portal>
+    </Tour.Root>
+  )
+}
diff --git a/packages/react/src/components/tour/index.ts b/packages/react/src/components/tour/index.ts
new file mode 100644
index 0000000000..8cfec7baa1
--- /dev/null
+++ b/packages/react/src/components/tour/index.ts
@@ -0,0 +1,45 @@
+export type { StepDetails as TourStepDetails } from '@zag-js/tour'
+export {
+  TourActionTrigger,
+  type TourActionTriggerBaseProps,
+  type TourActionTriggerProps,
+} from './tour-action-trigger'
+export { TourActions, type TourActionsProps } from './tour-actions'
+export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow'
+export { TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip'
+export { TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop'
+export {
+  TourCloseTrigger,
+  type TourCloseTriggerBaseProps,
+  type TourCloseTriggerProps,
+} from './tour-close-trigger'
+export { TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content'
+export { TourContext, type TourContextProps } from './tour-context'
+export { TourControl, type TourControlBaseProps, type TourControlProps } from './tour-control'
+export {
+  TourDescription,
+  type TourDescriptionBaseProps,
+  type TourDescriptionProps,
+} from './tour-description'
+export {
+  TourPositioner,
+  type TourPositionerBaseProps,
+  type TourPositionerProps,
+} from './tour-positioner'
+export {
+  TourProgressText,
+  type TourProgressTextBaseProps,
+  type TourProgressTextProps,
+} from './tour-progress-text'
+export { TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root'
+export {
+  TourSpotlight,
+  type TourSpotlightBaseProps,
+  type TourSpotlightProps,
+} from './tour-spotlight'
+export { TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title'
+export { tourAnatomy } from './tour.anatomy'
+export { useTour, type UseTourProps, type UseTourReturn } from './use-tour'
+export { useTourContext, type UseTourContext } from './use-tour-context'
+
+export * as Tour from './tour'
diff --git a/packages/react/src/components/tour/tour-action-trigger.tsx b/packages/react/src/components/tour/tour-action-trigger.tsx
new file mode 100644
index 0000000000..47cb8fcd9e
--- /dev/null
+++ b/packages/react/src/components/tour/tour-action-trigger.tsx
@@ -0,0 +1,27 @@
+import { mergeProps } from '@zag-js/react'
+import type { StepActionTriggerProps } from '@zag-js/tour'
+import { forwardRef } from 'react'
+import { createSplitProps } from '../../utils/create-split-props'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourActionTriggerBaseProps extends PolymorphicProps, StepActionTriggerProps {}
+export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {}
+
+export const TourActionTrigger = forwardRef<HTMLButtonElement, TourActionTriggerProps>(
+  (props, ref) => {
+    const [actionTriggerProps, localProps] = createSplitProps<StepActionTriggerProps>()(props, [
+      'action',
+    ])
+    const tour = useTourContext()
+    const mergedProps = mergeProps(tour.getActionTriggerProps(actionTriggerProps), localProps)
+
+    return (
+      <ark.button {...mergedProps} ref={ref}>
+        {mergedProps.children || actionTriggerProps.action.label}
+      </ark.button>
+    )
+  },
+)
+
+TourActionTrigger.displayName = 'TourActionTrigger'
diff --git a/packages/react/src/components/tour/tour-actions.tsx b/packages/react/src/components/tour/tour-actions.tsx
new file mode 100644
index 0000000000..d4e8883c3d
--- /dev/null
+++ b/packages/react/src/components/tour/tour-actions.tsx
@@ -0,0 +1,10 @@
+import type { StepAction } from '@zag-js/tour'
+import type { ReactNode } from 'react'
+import { useTourContext } from './use-tour-context'
+
+export interface TourActionsProps {
+  children: (actions: StepAction[]) => ReactNode
+}
+
+export const TourActions = (props: TourActionsProps) =>
+  props.children(useTourContext().step?.actions ?? [])
diff --git a/packages/react/src/components/tour/tour-arrow-tip.tsx b/packages/react/src/components/tour/tour-arrow-tip.tsx
new file mode 100644
index 0000000000..406ecc8b64
--- /dev/null
+++ b/packages/react/src/components/tour/tour-arrow-tip.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourArrowTipBaseProps extends PolymorphicProps {}
+export interface TourArrowTipProps extends HTMLProps<'div'>, TourArrowTipBaseProps {}
+
+export const TourArrowTip = forwardRef<HTMLDivElement, TourArrowTipProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getArrowTipProps(), props)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+TourArrowTip.displayName = 'TourArrowTip'
diff --git a/packages/react/src/components/tour/tour-arrow.tsx b/packages/react/src/components/tour/tour-arrow.tsx
new file mode 100644
index 0000000000..2fe6904062
--- /dev/null
+++ b/packages/react/src/components/tour/tour-arrow.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourArrowBaseProps extends PolymorphicProps {}
+export interface TourArrowProps extends HTMLProps<'div'>, TourArrowBaseProps {}
+
+export const TourArrow = forwardRef<HTMLDivElement, TourArrowProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getArrowProps(), props)
+
+  return tour.step?.arrow ? <ark.div {...mergedProps} ref={ref} /> : null
+})
+
+TourArrow.displayName = 'TourArrow'
diff --git a/packages/react/src/components/tour/tour-backdrop.tsx b/packages/react/src/components/tour/tour-backdrop.tsx
new file mode 100644
index 0000000000..43fb8c9665
--- /dev/null
+++ b/packages/react/src/components/tour/tour-backdrop.tsx
@@ -0,0 +1,30 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { composeRefs } from '../../utils/compose-refs'
+import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourBackdropBaseProps extends PolymorphicProps {}
+export interface TourBackdropProps extends HTMLProps<'div'>, TourBackdropBaseProps {}
+
+export const TourBackdrop = forwardRef<HTMLDivElement, TourBackdropProps>((props, ref) => {
+  const tour = useTourContext()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+  const presence = usePresence({
+    ...renderStrategyProps,
+    present: tour.open,
+  })
+  const mergedProps = mergeProps(tour.getBackdropProps(), presence.getPresenceProps(), props)
+
+  if (presence.unmounted) {
+    return null
+  }
+
+  return (
+    <ark.div {...mergedProps} ref={composeRefs(presence.ref, ref)} hidden={!tour.step?.backdrop} />
+  )
+})
+
+TourBackdrop.displayName = 'TourBackdrop'
diff --git a/packages/react/src/components/tour/tour-close-trigger.tsx b/packages/react/src/components/tour/tour-close-trigger.tsx
new file mode 100644
index 0000000000..7da48c600d
--- /dev/null
+++ b/packages/react/src/components/tour/tour-close-trigger.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourCloseTriggerBaseProps extends PolymorphicProps {}
+export interface TourCloseTriggerProps extends HTMLProps<'button'>, TourCloseTriggerBaseProps {}
+
+export const TourCloseTrigger = forwardRef<HTMLButtonElement, TourCloseTriggerProps>(
+  (props, ref) => {
+    const tour = useTourContext()
+    const mergedProps = mergeProps(tour.getCloseTriggerProps(), props)
+
+    return <ark.button {...mergedProps} ref={ref} />
+  },
+)
+
+TourCloseTrigger.displayName = 'TourCloseTrigger'
diff --git a/packages/react/src/components/tour/tour-content.tsx b/packages/react/src/components/tour/tour-content.tsx
new file mode 100644
index 0000000000..adf5ba74b5
--- /dev/null
+++ b/packages/react/src/components/tour/tour-content.tsx
@@ -0,0 +1,23 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { composeRefs } from '../../utils/compose-refs'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresenceContext } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourContentBaseProps extends PolymorphicProps {}
+export interface TourContentProps extends HTMLProps<'div'>, TourContentBaseProps {}
+
+export const TourContent = forwardRef<HTMLDivElement, TourContentProps>((props, ref) => {
+  const tour = useTourContext()
+  const presence = usePresenceContext()
+  const mergedProps = mergeProps(tour.getContentProps(), presence.getPresenceProps(), props)
+
+  if (presence.unmounted) {
+    return null
+  }
+
+  return <ark.div {...mergedProps} ref={composeRefs(presence.ref, ref)} />
+})
+
+TourContent.displayName = 'TourContent'
diff --git a/packages/react/src/components/tour/tour-context.tsx b/packages/react/src/components/tour/tour-context.tsx
new file mode 100644
index 0000000000..b3e2dd960c
--- /dev/null
+++ b/packages/react/src/components/tour/tour-context.tsx
@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react'
+import { type UseTourContext, useTourContext } from './use-tour-context'
+
+export interface TourContextProps {
+  children: (context: UseTourContext) => ReactNode
+}
+
+export const TourContext = (props: TourContextProps) => props.children(useTourContext())
diff --git a/packages/react/src/components/tour/tour-control.tsx b/packages/react/src/components/tour/tour-control.tsx
new file mode 100644
index 0000000000..95301baaee
--- /dev/null
+++ b/packages/react/src/components/tour/tour-control.tsx
@@ -0,0 +1,12 @@
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { tourAnatomy } from './tour.anatomy'
+
+export interface TourControlBaseProps extends PolymorphicProps {}
+export interface TourControlProps extends HTMLProps<'div'>, TourControlBaseProps {}
+
+export const TourControl = forwardRef<HTMLDivElement, TourControlProps>((props, ref) => (
+  <ark.div {...tourAnatomy.build().control.attrs} {...props} ref={ref} />
+))
+
+TourControl.displayName = 'TourControl'
diff --git a/packages/react/src/components/tour/tour-description.tsx b/packages/react/src/components/tour/tour-description.tsx
new file mode 100644
index 0000000000..553ddb201a
--- /dev/null
+++ b/packages/react/src/components/tour/tour-description.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourDescriptionBaseProps extends PolymorphicProps {}
+export interface TourDescriptionProps extends HTMLProps<'div'>, TourDescriptionBaseProps {}
+
+export const TourDescription = forwardRef<HTMLDivElement, TourDescriptionProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getDescriptionProps(), props)
+
+  return (
+    <ark.div {...mergedProps} ref={ref}>
+      {mergedProps.children || tour.step?.description}
+    </ark.div>
+  )
+})
+
+TourDescription.displayName = 'TourDescription'
diff --git a/packages/react/src/components/tour/tour-positioner.tsx b/packages/react/src/components/tour/tour-positioner.tsx
new file mode 100644
index 0000000000..ccc8c41b61
--- /dev/null
+++ b/packages/react/src/components/tour/tour-positioner.tsx
@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresenceContext } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourPositionerBaseProps extends PolymorphicProps {}
+export interface TourPositionerProps extends HTMLProps<'div'>, TourPositionerBaseProps {}
+
+export const TourPositioner = forwardRef<HTMLDivElement, TourPositionerProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getPositionerProps(), props)
+  const presence = usePresenceContext()
+
+  if (presence.unmounted) {
+    return null
+  }
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+TourPositioner.displayName = 'TourPositioner'
diff --git a/packages/react/src/components/tour/tour-progress-text.tsx b/packages/react/src/components/tour/tour-progress-text.tsx
new file mode 100644
index 0000000000..34d1c6b352
--- /dev/null
+++ b/packages/react/src/components/tour/tour-progress-text.tsx
@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourProgressTextBaseProps extends PolymorphicProps {}
+export interface TourProgressTextProps extends HTMLProps<'div'>, TourProgressTextBaseProps {}
+
+export const TourProgressText = forwardRef<HTMLDivElement, TourProgressTextProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getProgressTextProps(), props)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+TourProgressText.displayName = 'TourProgressText'
diff --git a/packages/react/src/components/tour/tour-root.tsx b/packages/react/src/components/tour/tour-root.tsx
new file mode 100644
index 0000000000..aa8e0b4a21
--- /dev/null
+++ b/packages/react/src/components/tour/tour-root.tsx
@@ -0,0 +1,32 @@
+import { mergeProps } from '@zag-js/react'
+import type { ReactNode } from 'react'
+import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+import {
+  PresenceProvider,
+  type UsePresenceProps,
+  splitPresenceProps,
+  usePresence,
+} from '../presence'
+import type { UseTourReturn } from './use-tour'
+import { TourProvider } from './use-tour-context'
+
+export interface TourRootBaseProps extends UsePresenceProps {
+  tour: UseTourReturn
+}
+export interface TourRootProps extends TourRootBaseProps {
+  children?: ReactNode
+}
+
+export const TourRoot = (props: TourRootProps) => {
+  const [presenceProps, { children, tour }] = splitPresenceProps(props)
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps)
+  const presence = usePresence(mergeProps({ present: tour.open }, presenceProps))
+
+  return (
+    <TourProvider value={tour}>
+      <RenderStrategyPropsProvider value={renderStrategyProps}>
+        <PresenceProvider value={presence}>{children}</PresenceProvider>
+      </RenderStrategyPropsProvider>
+    </TourProvider>
+  )
+}
diff --git a/packages/react/src/components/tour/tour-spotlight.tsx b/packages/react/src/components/tour/tour-spotlight.tsx
new file mode 100644
index 0000000000..69c932bbf3
--- /dev/null
+++ b/packages/react/src/components/tour/tour-spotlight.tsx
@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { composeRefs } from '../../utils/compose-refs'
+import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourSpotlightBaseProps extends PolymorphicProps {}
+export interface TourSpotlightProps extends HTMLProps<'div'>, TourSpotlightBaseProps {}
+
+export const TourSpotlight = forwardRef<HTMLDivElement, TourSpotlightProps>((props, ref) => {
+  const tour = useTourContext()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+  const presence = usePresence({
+    ...renderStrategyProps,
+    present: tour.open,
+  })
+  const mergedProps = mergeProps(tour.getSpotlightProps(), presence.getPresenceProps(), props)
+  const hidden = !tour.open || !tour.step?.target?.()
+
+  if (presence.unmounted) {
+    return null
+  }
+
+  return <ark.div {...mergedProps} ref={composeRefs(presence.ref, ref)} hidden={hidden} />
+})
+
+TourSpotlight.displayName = 'TourSpotlight'
diff --git a/packages/react/src/components/tour/tour-title.tsx b/packages/react/src/components/tour/tour-title.tsx
new file mode 100644
index 0000000000..e8c55d3792
--- /dev/null
+++ b/packages/react/src/components/tour/tour-title.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourTitleBaseProps extends PolymorphicProps {}
+export interface TourTitleProps extends HTMLProps<'h2'>, TourTitleBaseProps {}
+
+export const TourTitle = forwardRef<HTMLHeadingElement, TourTitleProps>((props, ref) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(tour.getTitleProps(), props)
+
+  return (
+    <ark.h2 {...mergedProps} ref={ref}>
+      {mergedProps.children || tour.step?.title}
+    </ark.h2>
+  )
+})
+
+TourTitle.displayName = 'TourTitle'
diff --git a/packages/react/src/components/tour/tour.anatomy.ts b/packages/react/src/components/tour/tour.anatomy.ts
new file mode 100644
index 0000000000..c7ae3bb0b8
--- /dev/null
+++ b/packages/react/src/components/tour/tour.anatomy.ts
@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/tour'
+
+export const tourAnatomy = anatomy.extendWith('control')
diff --git a/packages/react/src/components/tour/tour.stories.tsx b/packages/react/src/components/tour/tour.stories.tsx
new file mode 100644
index 0000000000..c7962d975c
--- /dev/null
+++ b/packages/react/src/components/tour/tour.stories.tsx
@@ -0,0 +1,9 @@
+import type { Meta } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Components / Tour',
+}
+
+export default meta
+
+export { Basic } from './examples/basic'
diff --git a/packages/react/src/components/tour/tour.ts b/packages/react/src/components/tour/tour.ts
new file mode 100644
index 0000000000..f918932a57
--- /dev/null
+++ b/packages/react/src/components/tour/tour.ts
@@ -0,0 +1,83 @@
+export type {
+  Point,
+  ProgressTextDetails,
+  StatusChangeDetails,
+  StepAction,
+  StepActionMap,
+  StepActionTriggerProps,
+  StepBaseDetails,
+  StepChangeDetails,
+  StepDetails,
+  StepEffectArgs,
+  StepPlacement,
+  StepStatus,
+  StepType,
+  WaitOptions,
+} from '@zag-js/tour'
+export {
+  TourActionTrigger as ActionTrigger,
+  type TourActionTriggerBaseProps as ActionTriggerBaseProps,
+  type TourActionTriggerProps as ActionTriggerProps,
+} from './tour-action-trigger'
+export { TourActions as Actions, type TourActionsProps as ActionsProps } from './tour-actions'
+export {
+  TourArrow as Arrow,
+  type TourArrowBaseProps as ArrowBaseProps,
+  type TourArrowProps as ArrowProps,
+} from './tour-arrow'
+export {
+  TourArrowTip as ArrowTip,
+  type TourArrowTipBaseProps as ArrowTipBaseProps,
+  type TourArrowTipProps as ArrowTipProps,
+} from './tour-arrow-tip'
+export {
+  TourBackdrop as Backdrop,
+  type TourBackdropBaseProps as BackdropBaseProps,
+  type TourBackdropProps as BackdropProps,
+} from './tour-backdrop'
+export {
+  TourCloseTrigger as CloseTrigger,
+  type TourCloseTriggerBaseProps as CloseTriggerBaseProps,
+  type TourCloseTriggerProps as CloseTriggerProps,
+} from './tour-close-trigger'
+export {
+  TourContent as Content,
+  type TourContentBaseProps as ContentBaseProps,
+  type TourContentProps as ContentProps,
+} from './tour-content'
+export { TourContext as Context, type TourContextProps as ContextProps } from './tour-context'
+export {
+  TourControl as Control,
+  type TourControlBaseProps as ControlBaseProps,
+  type TourControlProps as ControlProps,
+} from './tour-control'
+export {
+  TourDescription as Description,
+  type TourDescriptionBaseProps as DescriptionBaseProps,
+  type TourDescriptionProps as DescriptionProps,
+} from './tour-description'
+export {
+  TourPositioner as Positioner,
+  type TourPositionerBaseProps as PositionerBaseProps,
+  type TourPositionerProps as PositionerProps,
+} from './tour-positioner'
+export {
+  TourProgressText as ProgressText,
+  type TourProgressTextBaseProps as ProgressTextBaseProps,
+  type TourProgressTextProps as ProgressTextProps,
+} from './tour-progress-text'
+export {
+  TourRoot as Root,
+  type TourRootBaseProps as RootBaseProps,
+  type TourRootProps as RootProps,
+} from './tour-root'
+export {
+  TourSpotlight as Spotlight,
+  type TourSpotlightBaseProps as SpotlightBaseProps,
+  type TourSpotlightProps as SpotlightProps,
+} from './tour-spotlight'
+export {
+  TourTitle as Title,
+  type TourTitleBaseProps as TitleBaseProps,
+  type TourTitleProps as TitleProps,
+} from './tour-title'
diff --git a/packages/react/src/components/tour/use-tour-context.ts b/packages/react/src/components/tour/use-tour-context.ts
new file mode 100644
index 0000000000..70d9923010
--- /dev/null
+++ b/packages/react/src/components/tour/use-tour-context.ts
@@ -0,0 +1,11 @@
+import type { PropTypes } from '@zag-js/react'
+import type * as tour from '@zag-js/tour'
+import { createContext } from '../../utils/create-context'
+
+export interface UseTourContext extends tour.Api<PropTypes> {}
+
+export const [TourProvider, useTourContext] = createContext<UseTourContext>({
+  name: 'TourContext',
+  hookName: 'useTourContext',
+  providerName: '<TourProvider />',
+})
diff --git a/packages/react/src/components/tour/use-tour.ts b/packages/react/src/components/tour/use-tour.ts
new file mode 100644
index 0000000000..f45672081b
--- /dev/null
+++ b/packages/react/src/components/tour/use-tour.ts
@@ -0,0 +1,29 @@
+import { type PropTypes, normalizeProps, useMachine } from '@zag-js/react'
+import * as tour from '@zag-js/tour'
+import { useId } from 'react'
+import { useEnvironmentContext, useLocaleContext } from '../../providers'
+import type { Optional } from '../../types'
+import { useEvent } from '../../utils/use-event'
+
+export interface UseTourProps extends Optional<Omit<tour.Context, 'dir' | 'getRootNode'>, 'id'> {}
+export interface UseTourReturn extends tour.Api<PropTypes> {}
+
+export const useTour = (props: UseTourProps = {}): UseTourReturn => {
+  const { getRootNode } = useEnvironmentContext()
+  const { dir } = useLocaleContext()
+
+  const initialContext: tour.Context = {
+    id: useId(),
+    dir,
+    getRootNode,
+    ...props,
+  }
+
+  const context: tour.Context = {
+    ...initialContext,
+    onStatusChange: useEvent(props.onStatusChange),
+  }
+
+  const [state, send] = useMachine(tour.machine(initialContext), { context })
+  return tour.connect(state, send, normalizeProps)
+}
diff --git a/packages/solid/.storybook/main.css b/packages/solid/.storybook/main.css
index b628f4c00f..ee40b33e64 100644
--- a/packages/solid/.storybook/main.css
+++ b/packages/solid/.storybook/main.css
@@ -32,5 +32,6 @@
 @import url('./styles/toast.css');
 @import url('./styles/toggle-group.css');
 @import url('./styles/tooltip.css');
+@import url('./styles/tour.css');
 @import url('./styles/tree-view.css');
 @import url('./styles/timer.css');
diff --git a/packages/solid/.storybook/styles/tour.css b/packages/solid/.storybook/styles/tour.css
new file mode 100644
index 0000000000..8c4a75a6e7
--- /dev/null
+++ b/packages/solid/.storybook/styles/tour.css
@@ -0,0 +1,130 @@
+[data-scope='tour'][data-part='positioner'][data-type='floating'] {
+  position: absolute;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='bottom'] {
+  bottom: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='top'] {
+  top: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='end'] {
+  inset-inline-end: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='start'] {
+  inset-inline-start: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='dialog'] {
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='tour'][data-part='content'] {
+  --arrow-background: white;
+  --arrow-size: 10px;
+  background: white;
+  padding: 24px;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+}
+
+[data-scope='tour'][data-part='content'][data-type='dialog'] {
+  width: 500px;
+  background: lightblue;
+}
+
+[data-scope='tour'][data-part='content'][data-type='floating'] {
+  width: 500px;
+  background: rgb(15, 39, 136);
+  color: white;
+}
+
+[data-scope='tour'][data-part='arrow'] {
+  --arrow-background: white;
+  --arrow-shadow-color: #ebebeb;
+  box-shadow: var(--box-shadow);
+}
+
+[data-scope='tour'][data-part='title'] {
+  font-weight: 600;
+}
+
+[data-scope='tour'][data-part='description'] {
+  margin-bottom: 20px;
+}
+
+[data-scope='tour'][data-part='progress-text'] {
+  margin-bottom: 20px;
+  opacity: 0.72;
+}
+
+[data-scope='tour'][data-part='backdrop'] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+[data-scope='tour'][data-part='spotlight'] {
+  border: 3px solid pink;
+}
+
+[data-scope='tour'][data-part='close-trigger'] {
+  font-family: inherit;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.tour.button__group {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.tour .steps__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 50vh;
+}
+
+.tour .overflow__container {
+  width: 500px;
+  height: 400px;
+  max-height: 200px;
+  overflow: auto;
+  border: 2px solid teal;
+  position: relative;
+}
+
+.tour .overflow__container::before {
+  content: 'Overflow';
+  display: block;
+  position: sticky;
+  background-color: teal;
+  color: white;
+  padding: 2px 4px 3px;
+  top: 0px;
+}
+
+.tour .overflow__container .h-200px {
+  height: 200px;
+}
+
+.tour .overflow__container .h-100px {
+  height: 100px;
+}
diff --git a/packages/solid/package.json b/packages/solid/package.json
index 1450a1f614..57500b957f 100644
--- a/packages/solid/package.json
+++ b/packages/solid/package.json
@@ -39,6 +39,7 @@
     "toast",
     "toggle group",
     "tooltip",
+    "tour",
     "tree view"
   ],
   "license": "MIT",
@@ -146,9 +147,9 @@
     "@zag-js/dialog": "0.81.1",
     "@zag-js/dom-query": "0.81.1",
     "@zag-js/editable": "0.81.1",
-    "@zag-js/focus-trap": "0.81.1",
     "@zag-js/file-upload": "0.81.1",
     "@zag-js/file-utils": "0.81.1",
+    "@zag-js/focus-trap": "0.81.1",
     "@zag-js/highlight-word": "0.81.1",
     "@zag-js/hover-card": "0.81.1",
     "@zag-js/i18n-utils": "0.81.1",
@@ -176,6 +177,7 @@
     "@zag-js/toast": "0.81.1",
     "@zag-js/toggle-group": "0.81.1",
     "@zag-js/tooltip": "0.81.1",
+    "@zag-js/tour": "0.81.1",
     "@zag-js/tree-view": "0.81.1",
     "@zag-js/types": "0.81.1"
   },
diff --git a/packages/solid/src/components/focus-trap/examples/autofocus.tsx b/packages/solid/src/components/focus-trap/examples/autofocus.tsx
index b71c902a96..d2b3651b52 100644
--- a/packages/solid/src/components/focus-trap/examples/autofocus.tsx
+++ b/packages/solid/src/components/focus-trap/examples/autofocus.tsx
@@ -1,5 +1,5 @@
 import { FocusTrap } from '@ark-ui/solid/focus-trap'
-import { createSignal, Show } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
 
 export const Autofocus = () => {
   const [trapped, setTrapped] = createSignal(false)
diff --git a/packages/solid/src/components/index.tsx b/packages/solid/src/components/index.tsx
index f5ee2aff16..0e2dd40018 100644
--- a/packages/solid/src/components/index.tsx
+++ b/packages/solid/src/components/index.tsx
@@ -44,4 +44,5 @@ export * from './toast'
 export * from './toggle'
 export * from './toggle-group'
 export * from './tooltip'
+export * from './tour'
 export * from './tree-view'
diff --git a/packages/solid/src/components/tour/examples/basic.tsx b/packages/solid/src/components/tour/examples/basic.tsx
new file mode 100644
index 0000000000..9b38078b63
--- /dev/null
+++ b/packages/solid/src/components/tour/examples/basic.tsx
@@ -0,0 +1,29 @@
+import { Frame } from '@ark-ui/solid/frame'
+import { DemoTour } from './tour'
+
+export const Basic = () => {
+  return (
+    <main>
+      <DemoTour />
+      <div class="tour">
+        <div class="steps__container">
+          <h3 id="step-1">Step 1</h3>
+          <div class="overflow__container">
+            <div class="h-200px" />
+            <h3 id="step-2">Step 2</h3>
+            <div class="h-100px" />
+          </div>
+          <Frame>
+            <h1 id="step-2a">Iframe Content</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+          </Frame>
+          <h3 id="step-3">Step 3</h3>
+          <h3 id="step-4">Step 4</h3>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/packages/solid/src/components/tour/examples/steps.tsx b/packages/solid/src/components/tour/examples/steps.tsx
new file mode 100644
index 0000000000..24ba37081b
--- /dev/null
+++ b/packages/solid/src/components/tour/examples/steps.tsx
@@ -0,0 +1,90 @@
+import type { TourStepDetails } from '@ark-ui/solid/tour'
+
+export const steps: TourStepDetails[] = [
+  {
+    type: 'dialog',
+    id: 'step-0',
+    title: 'Centered tour (no target)',
+    description: 'This is the center of the world. Ready to start the tour?',
+    actions: [{ label: 'Next', action: 'next' }],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-1',
+    title: 'Step 1. Welcome',
+    description: 'To the new world',
+    target: () => document.querySelector<HTMLElement>('#step-1'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+    effect({ show, update }) {
+      const abort = new AbortController()
+
+      fetch('https://api.github.com/users/octocat', { signal: abort.signal })
+        .then((res) => res.json())
+        .then((data) => {
+          update({ title: data.name })
+          show()
+        })
+
+      return () => {
+        abort.abort()
+      }
+    },
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#step-2'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2a',
+    title: 'Step 2a. Inside an Iframe container',
+    description: 'It calculates the offset rect correctly. Thanks to floating UI!',
+    target: () => {
+      const [frameEl] = Array.from(frames)
+      return frameEl?.document.querySelector<HTMLElement>('#step-2a')
+    },
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-3',
+    title: 'Step 3. Normal scrolling',
+    description: 'The new world is a great place',
+    target: () => document.querySelector<HTMLElement>('#step-3'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-4',
+    title: 'Step 4. Close to bottom',
+    description: 'So nice to see the scrolling works!',
+    target: () => document.querySelector<HTMLElement>('#step-4'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'dialog',
+    id: 'step-5',
+    title: "You're all sorted! (no target)",
+    description: 'Thanks for trying out the tour. Enjoy the app!',
+    actions: [{ label: 'Finish', action: 'dismiss' }],
+  },
+]
diff --git a/packages/solid/src/components/tour/examples/tour.tsx b/packages/solid/src/components/tour/examples/tour.tsx
new file mode 100644
index 0000000000..3050e16e0d
--- /dev/null
+++ b/packages/solid/src/components/tour/examples/tour.tsx
@@ -0,0 +1,38 @@
+import { Tour, useTour } from '@ark-ui/solid/tour'
+import { XIcon } from 'lucide-solid'
+import { For, onMount } from 'solid-js'
+import { steps } from './steps'
+
+export const DemoTour = () => {
+  const tour = useTour({ steps })
+
+  // Start the tour when the component mounts
+  onMount(() => tour().start())
+
+  return (
+    <Tour.Root tour={tour}>
+      <Tour.Backdrop />
+      <Tour.Spotlight />
+      <Tour.Positioner>
+        <Tour.Content>
+          <Tour.Arrow>
+            <Tour.ArrowTip />
+          </Tour.Arrow>
+          <Tour.Title />
+          <Tour.Description />
+          <Tour.ProgressText />
+          <Tour.CloseTrigger>
+            <XIcon />
+          </Tour.CloseTrigger>
+          <Tour.Control>
+            <Tour.Actions>
+              {(actions) => (
+                <For each={actions()}>{(action) => <Tour.ActionTrigger action={action} />}</For>
+              )}
+            </Tour.Actions>
+          </Tour.Control>
+        </Tour.Content>
+      </Tour.Positioner>
+    </Tour.Root>
+  )
+}
diff --git a/packages/solid/src/components/tour/index.tsx b/packages/solid/src/components/tour/index.tsx
new file mode 100644
index 0000000000..8cfec7baa1
--- /dev/null
+++ b/packages/solid/src/components/tour/index.tsx
@@ -0,0 +1,45 @@
+export type { StepDetails as TourStepDetails } from '@zag-js/tour'
+export {
+  TourActionTrigger,
+  type TourActionTriggerBaseProps,
+  type TourActionTriggerProps,
+} from './tour-action-trigger'
+export { TourActions, type TourActionsProps } from './tour-actions'
+export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow'
+export { TourArrowTip, type TourArrowTipBaseProps, type TourArrowTipProps } from './tour-arrow-tip'
+export { TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop'
+export {
+  TourCloseTrigger,
+  type TourCloseTriggerBaseProps,
+  type TourCloseTriggerProps,
+} from './tour-close-trigger'
+export { TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content'
+export { TourContext, type TourContextProps } from './tour-context'
+export { TourControl, type TourControlBaseProps, type TourControlProps } from './tour-control'
+export {
+  TourDescription,
+  type TourDescriptionBaseProps,
+  type TourDescriptionProps,
+} from './tour-description'
+export {
+  TourPositioner,
+  type TourPositionerBaseProps,
+  type TourPositionerProps,
+} from './tour-positioner'
+export {
+  TourProgressText,
+  type TourProgressTextBaseProps,
+  type TourProgressTextProps,
+} from './tour-progress-text'
+export { TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root'
+export {
+  TourSpotlight,
+  type TourSpotlightBaseProps,
+  type TourSpotlightProps,
+} from './tour-spotlight'
+export { TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title'
+export { tourAnatomy } from './tour.anatomy'
+export { useTour, type UseTourProps, type UseTourReturn } from './use-tour'
+export { useTourContext, type UseTourContext } from './use-tour-context'
+
+export * as Tour from './tour'
diff --git a/packages/solid/src/components/tour/tour-action-trigger.tsx b/packages/solid/src/components/tour/tour-action-trigger.tsx
new file mode 100644
index 0000000000..9e8ef96daa
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-action-trigger.tsx
@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid'
+import type { StepActionTriggerProps } from '@zag-js/tour'
+import { createSplitProps } from '../../utils/create-split-props'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourActionTriggerBaseProps
+  extends PolymorphicProps<'button'>,
+    StepActionTriggerProps {}
+export interface TourActionTriggerProps extends HTMLProps<'button'>, TourActionTriggerBaseProps {}
+
+export const TourActionTrigger = (props: TourActionTriggerProps) => {
+  const [actionTriggerProps, localProps] = createSplitProps<StepActionTriggerProps>()(props, [
+    'action',
+  ])
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getActionTriggerProps(actionTriggerProps), localProps)
+
+  return (
+    <ark.button {...mergedProps}>
+      {mergedProps.children || actionTriggerProps.action.label}
+    </ark.button>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-actions.tsx b/packages/solid/src/components/tour/tour-actions.tsx
new file mode 100644
index 0000000000..d4f8df68cd
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-actions.tsx
@@ -0,0 +1,13 @@
+import type { StepAction } from '@zag-js/tour'
+import type { Accessor, JSX } from 'solid-js'
+
+import { useTourContext } from './use-tour-context'
+
+export interface TourActionsProps {
+  children: (actions: Accessor<StepAction[]>) => JSX.Element
+}
+
+export const TourActions = (props: TourActionsProps) => {
+  const tour = useTourContext()
+  return props.children(() => tour().step?.actions ?? [])
+}
diff --git a/packages/solid/src/components/tour/tour-arrow-tip.tsx b/packages/solid/src/components/tour/tour-arrow-tip.tsx
new file mode 100644
index 0000000000..ea5531f1d0
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-arrow-tip.tsx
@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourArrowTipBaseProps extends PolymorphicProps<'div'> {}
+export interface TourArrowTipProps extends HTMLProps<'div'>, TourArrowTipBaseProps {}
+
+export const TourArrowTip = (props: TourArrowTipProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getArrowTipProps(), props)
+
+  return <ark.div {...mergedProps} />
+}
diff --git a/packages/solid/src/components/tour/tour-arrow.tsx b/packages/solid/src/components/tour/tour-arrow.tsx
new file mode 100644
index 0000000000..5845f5b9a6
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-arrow.tsx
@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid'
+import { Show } from 'solid-js'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourArrowBaseProps extends PolymorphicProps<'div'> {}
+export interface TourArrowProps extends HTMLProps<'div'>, TourArrowBaseProps {}
+
+export const TourArrow = (props: TourArrowProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getArrowProps(), props)
+
+  return (
+    <Show when={tour().step?.arrow}>
+      <ark.div {...mergedProps} />
+    </Show>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-backdrop.tsx b/packages/solid/src/components/tour/tour-backdrop.tsx
new file mode 100644
index 0000000000..d26b1c1582
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-backdrop.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from '@zag-js/solid'
+import { Show } from 'solid-js'
+import { useRenderStrategyContext } from '../../utils/render-strategy'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourBackdropBaseProps extends PolymorphicProps<'div'> {}
+export interface TourBackdropProps extends HTMLProps<'div'>, TourBackdropBaseProps {}
+
+export const TourBackdrop = (props: TourBackdropProps) => {
+  const tour = useTourContext()
+  const renderStrategyProps = useRenderStrategyContext()
+  const presence = usePresence(mergeProps(renderStrategyProps, () => ({ present: tour().open })))
+  const mergedProps = mergeProps(
+    () => tour().getBackdropProps(),
+    () => presence().presenceProps,
+    props,
+  )
+
+  return (
+    <Show when={!presence().unmounted}>
+      <ark.div {...mergedProps} hidden={!tour().step?.backdrop} />
+    </Show>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-close-trigger.tsx b/packages/solid/src/components/tour/tour-close-trigger.tsx
new file mode 100644
index 0000000000..c0f2ebde66
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-close-trigger.tsx
@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourCloseTriggerBaseProps extends PolymorphicProps<'button'> {}
+export interface TourCloseTriggerProps extends HTMLProps<'button'>, TourCloseTriggerBaseProps {}
+
+export const TourCloseTrigger = (props: TourCloseTriggerProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getCloseTriggerProps(), props)
+
+  return <ark.button {...mergedProps} />
+}
diff --git a/packages/solid/src/components/tour/tour-content.tsx b/packages/solid/src/components/tour/tour-content.tsx
new file mode 100644
index 0000000000..e1d4b4f1ce
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-content.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from '@zag-js/solid'
+import { Show } from 'solid-js'
+import { useRenderStrategyContext } from '../../utils/render-strategy'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourContentBaseProps extends PolymorphicProps<'div'> {}
+export interface TourContentProps extends HTMLProps<'div'>, TourContentBaseProps {}
+
+export const TourContent = (props: TourContentProps) => {
+  const tour = useTourContext()
+  const renderStrategyProps = useRenderStrategyContext()
+  const presence = usePresence(mergeProps(renderStrategyProps, () => ({ present: tour().open })))
+  const mergedProps = mergeProps(
+    () => tour().getContentProps(),
+    () => presence().presenceProps,
+    props,
+  )
+
+  return (
+    <Show when={!presence().unmounted}>
+      <ark.div {...mergedProps} />
+    </Show>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-context.tsx b/packages/solid/src/components/tour/tour-context.tsx
new file mode 100644
index 0000000000..050fb0b15d
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-context.tsx
@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js'
+
+import { type UseTourContext, useTourContext } from './use-tour-context'
+
+export interface TourContextProps {
+  children: (context: UseTourContext) => JSX.Element
+}
+
+export const TourContext = (props: TourContextProps) => props.children(useTourContext())
diff --git a/packages/solid/src/components/tour/tour-control.tsx b/packages/solid/src/components/tour/tour-control.tsx
new file mode 100644
index 0000000000..a028165001
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-control.tsx
@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { tourAnatomy } from './tour.anatomy'
+
+export interface TourControlBaseProps extends PolymorphicProps<'div'> {}
+export interface TourControlProps extends HTMLProps<'div'>, TourControlBaseProps {}
+
+export const TourControl = (props: TourControlProps) => {
+  const mergedProps = mergeProps(() => tourAnatomy.build().control.attrs, props)
+
+  return <ark.div {...mergedProps} />
+}
diff --git a/packages/solid/src/components/tour/tour-description.tsx b/packages/solid/src/components/tour/tour-description.tsx
new file mode 100644
index 0000000000..a8dacb5ea4
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-description.tsx
@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourDescriptionBaseProps extends PolymorphicProps<'div'> {}
+export interface TourDescriptionProps extends HTMLProps<'div'>, TourDescriptionBaseProps {}
+
+export const TourDescription = (props: TourDescriptionProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getDescriptionProps(), props)
+
+  return <ark.div {...mergedProps}>{mergedProps.children || tour().step?.description}</ark.div>
+}
diff --git a/packages/solid/src/components/tour/tour-positioner.tsx b/packages/solid/src/components/tour/tour-positioner.tsx
new file mode 100644
index 0000000000..63a6e3f7e0
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-positioner.tsx
@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/solid'
+import { Show } from 'solid-js'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresenceContext } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourPositionerBaseProps extends PolymorphicProps<'div'> {}
+export interface TourPositionerProps extends HTMLProps<'div'>, TourPositionerBaseProps {}
+
+export const TourPositioner = (props: TourPositionerProps) => {
+  const tour = useTourContext()
+  const presence = usePresenceContext()
+  const mergedProps = mergeProps(() => tour().getPositionerProps(), props)
+
+  return (
+    <Show when={!presence().unmounted}>
+      <ark.div {...mergedProps} />
+    </Show>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-progress-text.tsx b/packages/solid/src/components/tour/tour-progress-text.tsx
new file mode 100644
index 0000000000..7d8c93e863
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-progress-text.tsx
@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourProgressTextBaseProps extends PolymorphicProps<'div'> {}
+export interface TourProgressTextProps extends HTMLProps<'div'>, TourProgressTextBaseProps {}
+
+export const TourProgressText = (props: TourProgressTextProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getProgressTextProps(), props)
+
+  return <ark.div {...mergedProps} />
+}
diff --git a/packages/solid/src/components/tour/tour-root.tsx b/packages/solid/src/components/tour/tour-root.tsx
new file mode 100644
index 0000000000..9662db08bd
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-root.tsx
@@ -0,0 +1,37 @@
+import { mergeProps } from '@zag-js/solid'
+import type { JSX } from 'solid-js'
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+import {
+  PresenceProvider,
+  type UsePresenceProps,
+  splitPresenceProps,
+  usePresence,
+} from '../presence'
+import type { UseTourReturn } from './use-tour'
+import { TourProvider } from './use-tour-context'
+
+interface RootProps {
+  tour: UseTourReturn
+}
+
+export interface TourRootBaseProps extends RootProps, UsePresenceProps {}
+export interface TourRootProps extends TourRootBaseProps {
+  children?: JSX.Element
+}
+
+export const TourRoot = (props: TourRootProps) => {
+  const [presenceProps, rootProps] = splitPresenceProps(props)
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps)
+
+  const presence = usePresence(
+    mergeProps(presenceProps, () => ({ present: rootProps.tour().open })),
+  )
+
+  return (
+    <TourProvider value={rootProps.tour}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <PresenceProvider value={presence}>{rootProps.children}</PresenceProvider>
+      </RenderStrategyProvider>
+    </TourProvider>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-spotlight.tsx b/packages/solid/src/components/tour/tour-spotlight.tsx
new file mode 100644
index 0000000000..d02ff4d0fe
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-spotlight.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from '@zag-js/solid'
+import { Show } from 'solid-js'
+import { useRenderStrategyContext } from '../../utils/render-strategy'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+export interface TourSpotlightBaseProps extends PolymorphicProps<'div'> {}
+export interface TourSpotlightProps extends HTMLProps<'div'>, TourSpotlightBaseProps {}
+
+export const TourSpotlight = (props: TourSpotlightProps) => {
+  const tour = useTourContext()
+  const renderStrategyProps = useRenderStrategyContext()
+  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: tour().open })))
+  const mergedProps = mergeProps(
+    () => tour().getSpotlightProps(),
+    () => presenceApi().presenceProps,
+    props,
+  )
+
+  return (
+    <Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps} hidden={!tour().open || !tour().step?.target?.()} />
+    </Show>
+  )
+}
diff --git a/packages/solid/src/components/tour/tour-title.tsx b/packages/solid/src/components/tour/tour-title.tsx
new file mode 100644
index 0000000000..a3b08d3d23
--- /dev/null
+++ b/packages/solid/src/components/tour/tour-title.tsx
@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+
+export interface TourTitleBaseProps extends PolymorphicProps<'h2'> {}
+export interface TourTitleProps extends HTMLProps<'h2'>, TourTitleBaseProps {}
+
+export const TourTitle = (props: TourTitleProps) => {
+  const tour = useTourContext()
+  const mergedProps = mergeProps(() => tour().getTitleProps(), props)
+
+  return <ark.h2 {...mergedProps}>{mergedProps.children || tour().step?.title}</ark.h2>
+}
diff --git a/packages/solid/src/components/tour/tour.anatomy.ts b/packages/solid/src/components/tour/tour.anatomy.ts
new file mode 100644
index 0000000000..c7ae3bb0b8
--- /dev/null
+++ b/packages/solid/src/components/tour/tour.anatomy.ts
@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/tour'
+
+export const tourAnatomy = anatomy.extendWith('control')
diff --git a/packages/solid/src/components/tour/tour.stories.tsx b/packages/solid/src/components/tour/tour.stories.tsx
new file mode 100644
index 0000000000..4d05a8783f
--- /dev/null
+++ b/packages/solid/src/components/tour/tour.stories.tsx
@@ -0,0 +1,9 @@
+import type { Meta } from 'storybook-solidjs'
+
+const meta: Meta = {
+  title: 'Components / Tour',
+}
+
+export default meta
+
+export { Basic } from './examples/basic'
diff --git a/packages/solid/src/components/tour/tour.ts b/packages/solid/src/components/tour/tour.ts
new file mode 100644
index 0000000000..f918932a57
--- /dev/null
+++ b/packages/solid/src/components/tour/tour.ts
@@ -0,0 +1,83 @@
+export type {
+  Point,
+  ProgressTextDetails,
+  StatusChangeDetails,
+  StepAction,
+  StepActionMap,
+  StepActionTriggerProps,
+  StepBaseDetails,
+  StepChangeDetails,
+  StepDetails,
+  StepEffectArgs,
+  StepPlacement,
+  StepStatus,
+  StepType,
+  WaitOptions,
+} from '@zag-js/tour'
+export {
+  TourActionTrigger as ActionTrigger,
+  type TourActionTriggerBaseProps as ActionTriggerBaseProps,
+  type TourActionTriggerProps as ActionTriggerProps,
+} from './tour-action-trigger'
+export { TourActions as Actions, type TourActionsProps as ActionsProps } from './tour-actions'
+export {
+  TourArrow as Arrow,
+  type TourArrowBaseProps as ArrowBaseProps,
+  type TourArrowProps as ArrowProps,
+} from './tour-arrow'
+export {
+  TourArrowTip as ArrowTip,
+  type TourArrowTipBaseProps as ArrowTipBaseProps,
+  type TourArrowTipProps as ArrowTipProps,
+} from './tour-arrow-tip'
+export {
+  TourBackdrop as Backdrop,
+  type TourBackdropBaseProps as BackdropBaseProps,
+  type TourBackdropProps as BackdropProps,
+} from './tour-backdrop'
+export {
+  TourCloseTrigger as CloseTrigger,
+  type TourCloseTriggerBaseProps as CloseTriggerBaseProps,
+  type TourCloseTriggerProps as CloseTriggerProps,
+} from './tour-close-trigger'
+export {
+  TourContent as Content,
+  type TourContentBaseProps as ContentBaseProps,
+  type TourContentProps as ContentProps,
+} from './tour-content'
+export { TourContext as Context, type TourContextProps as ContextProps } from './tour-context'
+export {
+  TourControl as Control,
+  type TourControlBaseProps as ControlBaseProps,
+  type TourControlProps as ControlProps,
+} from './tour-control'
+export {
+  TourDescription as Description,
+  type TourDescriptionBaseProps as DescriptionBaseProps,
+  type TourDescriptionProps as DescriptionProps,
+} from './tour-description'
+export {
+  TourPositioner as Positioner,
+  type TourPositionerBaseProps as PositionerBaseProps,
+  type TourPositionerProps as PositionerProps,
+} from './tour-positioner'
+export {
+  TourProgressText as ProgressText,
+  type TourProgressTextBaseProps as ProgressTextBaseProps,
+  type TourProgressTextProps as ProgressTextProps,
+} from './tour-progress-text'
+export {
+  TourRoot as Root,
+  type TourRootBaseProps as RootBaseProps,
+  type TourRootProps as RootProps,
+} from './tour-root'
+export {
+  TourSpotlight as Spotlight,
+  type TourSpotlightBaseProps as SpotlightBaseProps,
+  type TourSpotlightProps as SpotlightProps,
+} from './tour-spotlight'
+export {
+  TourTitle as Title,
+  type TourTitleBaseProps as TitleBaseProps,
+  type TourTitleProps as TitleProps,
+} from './tour-title'
diff --git a/packages/solid/src/components/tour/use-tour-context.ts b/packages/solid/src/components/tour/use-tour-context.ts
new file mode 100644
index 0000000000..8de7a24f86
--- /dev/null
+++ b/packages/solid/src/components/tour/use-tour-context.ts
@@ -0,0 +1,9 @@
+import { createContext } from '../../utils/create-context'
+import type { UseTourReturn } from './use-tour'
+
+export interface UseTourContext extends UseTourReturn {}
+
+export const [TourProvider, useTourContext] = createContext<UseTourContext>({
+  hookName: 'useTourContext',
+  providerName: '<TourProvider />',
+})
diff --git a/packages/solid/src/components/tour/use-tour.ts b/packages/solid/src/components/tour/use-tour.ts
new file mode 100644
index 0000000000..000ff05ef4
--- /dev/null
+++ b/packages/solid/src/components/tour/use-tour.ts
@@ -0,0 +1,27 @@
+import { type PropTypes, normalizeProps, useMachine } from '@zag-js/solid'
+import * as tour from '@zag-js/tour'
+import { type Accessor, createMemo, createUniqueId } from 'solid-js'
+import { useEnvironmentContext, useLocaleContext } from '../../providers'
+import type { Optional } from '../../types'
+
+export interface UseTourProps extends Optional<Omit<tour.Context, 'dir' | 'getRootNode'>, 'id'> {}
+export interface UseTourReturn extends Accessor<tour.Api<PropTypes>> {}
+
+export const useTour = (props: UseTourProps = {}): UseTourReturn => {
+  const id = createUniqueId()
+  const locale = useLocaleContext()
+  const environment = useEnvironmentContext()
+
+  const context = createMemo(() => ({
+    id,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...props,
+  }))
+
+  const [state, send] = useMachine(tour.machine(context()), {
+    context,
+  })
+
+  return createMemo(() => tour.connect(state, send, normalizeProps))
+}
diff --git a/packages/svelte/src/lib/components/presence/presence.test.ts b/packages/svelte/src/lib/components/presence/presence.test.ts
index 16eb75738e..fd5b7bafe2 100644
--- a/packages/svelte/src/lib/components/presence/presence.test.ts
+++ b/packages/svelte/src/lib/components/presence/presence.test.ts
@@ -39,7 +39,9 @@ describe('Presence', () => {
   })
 
   it('should control presence when lazy mounting and unmounting on exit', async () => {
-    render(ComponentUnderTest, { props: { unmountOnExit: true, lazyMount: true } })
+    render(ComponentUnderTest, {
+      props: { unmountOnExit: true, lazyMount: true },
+    })
 
     expect(screen.queryByText('Content')).not.toBeInTheDocument()
 
diff --git a/packages/vue/.storybook/main.css b/packages/vue/.storybook/main.css
index 0d0842a231..6a650f5b97 100644
--- a/packages/vue/.storybook/main.css
+++ b/packages/vue/.storybook/main.css
@@ -15,8 +15,8 @@
 @import url('./styles/pagination.css');
 @import url('./styles/pin-input.css');
 @import url('./styles/popover.css');
-@import url('./styles/progress.css');
 @import url('./styles/presence.css');
+@import url('./styles/progress.css');
 @import url('./styles/qr-code.css');
 @import url('./styles/radio-group.css');
 @import url('./styles/segment-group.css');
@@ -28,8 +28,9 @@
 @import url('./styles/tabs.css');
 @import url('./styles/tags-input.css');
 @import url('./styles/time-picker.css');
+@import url('./styles/timer.css');
 @import url('./styles/toast.css');
 @import url('./styles/toggle-group.css');
 @import url('./styles/tooltip.css');
+@import url('./styles/tour.css');
 @import url('./styles/tree-view.css');
-@import url('./styles/timer.css');
diff --git a/packages/vue/.storybook/styles/tour.css b/packages/vue/.storybook/styles/tour.css
new file mode 100644
index 0000000000..8c4a75a6e7
--- /dev/null
+++ b/packages/vue/.storybook/styles/tour.css
@@ -0,0 +1,130 @@
+[data-scope='tour'][data-part='positioner'][data-type='floating'] {
+  position: absolute;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='bottom'] {
+  bottom: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='top'] {
+  top: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='end'] {
+  inset-inline-end: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='floating'][data-placement*='start'] {
+  inset-inline-start: 24px;
+}
+
+[data-scope='tour'][data-part='positioner'][data-type='dialog'] {
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='tour'][data-part='content'] {
+  --arrow-background: white;
+  --arrow-size: 10px;
+  background: white;
+  padding: 24px;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+}
+
+[data-scope='tour'][data-part='content'][data-type='dialog'] {
+  width: 500px;
+  background: lightblue;
+}
+
+[data-scope='tour'][data-part='content'][data-type='floating'] {
+  width: 500px;
+  background: rgb(15, 39, 136);
+  color: white;
+}
+
+[data-scope='tour'][data-part='arrow'] {
+  --arrow-background: white;
+  --arrow-shadow-color: #ebebeb;
+  box-shadow: var(--box-shadow);
+}
+
+[data-scope='tour'][data-part='title'] {
+  font-weight: 600;
+}
+
+[data-scope='tour'][data-part='description'] {
+  margin-bottom: 20px;
+}
+
+[data-scope='tour'][data-part='progress-text'] {
+  margin-bottom: 20px;
+  opacity: 0.72;
+}
+
+[data-scope='tour'][data-part='backdrop'] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+[data-scope='tour'][data-part='spotlight'] {
+  border: 3px solid pink;
+}
+
+[data-scope='tour'][data-part='close-trigger'] {
+  font-family: inherit;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.tour.button__group {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.tour .steps__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 50vh;
+}
+
+.tour .overflow__container {
+  width: 500px;
+  height: 400px;
+  max-height: 200px;
+  overflow: auto;
+  border: 2px solid teal;
+  position: relative;
+}
+
+.tour .overflow__container::before {
+  content: 'Overflow';
+  display: block;
+  position: sticky;
+  background-color: teal;
+  color: white;
+  padding: 2px 4px 3px;
+  top: 0px;
+}
+
+.tour .overflow__container .h-200px {
+  height: 200px;
+}
+
+.tour .overflow__container .h-100px {
+  height: 100px;
+}
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 19e5b682f4..a320c3a2e0 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -39,6 +39,7 @@
     "toast",
     "toggle group",
     "tooltip",
+    "tour",
     "tree view"
   ],
   "license": "MIT",
@@ -182,11 +183,11 @@
     "@zag-js/dom-query": "0.81.1",
     "@zag-js/editable": "0.81.1",
     "@zag-js/file-upload": "0.81.1",
+    "@zag-js/file-utils": "0.81.1",
+    "@zag-js/focus-trap": "0.81.1",
     "@zag-js/highlight-word": "0.81.1",
     "@zag-js/hover-card": "0.81.1",
     "@zag-js/i18n-utils": "0.81.1",
-    "@zag-js/focus-trap": "0.81.1",
-    "@zag-js/file-utils": "0.81.1",
     "@zag-js/menu": "0.81.1",
     "@zag-js/number-input": "0.81.1",
     "@zag-js/pagination": "0.81.1",
@@ -209,6 +210,7 @@
     "@zag-js/toast": "0.81.1",
     "@zag-js/toggle-group": "0.81.1",
     "@zag-js/tooltip": "0.81.1",
+    "@zag-js/tour": "0.81.1",
     "@zag-js/tree-view": "0.81.1",
     "@zag-js/types": "0.81.1",
     "@zag-js/utils": "0.81.1",
diff --git a/packages/vue/src/components/focus-trap/examples/autofocus.vue b/packages/vue/src/components/focus-trap/examples/autofocus.vue
index cef54b5f2a..9a6ab69ade 100644
--- a/packages/vue/src/components/focus-trap/examples/autofocus.vue
+++ b/packages/vue/src/components/focus-trap/examples/autofocus.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { FocusTrap } from '@ark-ui/vue/focus-trap'
+import { ref } from 'vue'
 
 const trapped = ref(false)
 const buttonRef = ref<HTMLButtonElement>()
diff --git a/packages/vue/src/components/focus-trap/examples/basic.vue b/packages/vue/src/components/focus-trap/examples/basic.vue
index 19b0b88cbd..bb24725baa 100644
--- a/packages/vue/src/components/focus-trap/examples/basic.vue
+++ b/packages/vue/src/components/focus-trap/examples/basic.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { FocusTrap } from '@ark-ui/vue/focus-trap'
+import { ref } from 'vue'
 
 const trapped = ref(false)
 </script>
diff --git a/packages/vue/src/components/focus-trap/examples/initial-focus.vue b/packages/vue/src/components/focus-trap/examples/initial-focus.vue
index dbf7906a2a..2a9ff423ee 100644
--- a/packages/vue/src/components/focus-trap/examples/initial-focus.vue
+++ b/packages/vue/src/components/focus-trap/examples/initial-focus.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { FocusTrap } from '@ark-ui/vue/focus-trap'
+import { ref } from 'vue'
 
 const trapped = ref(false)
 const inputRef = ref<HTMLInputElement>()
diff --git a/packages/vue/src/components/focus-trap/focus-trap.stories.vue b/packages/vue/src/components/focus-trap/focus-trap.stories.vue
index f6e36475cf..d4e9cc172d 100644
--- a/packages/vue/src/components/focus-trap/focus-trap.stories.vue
+++ b/packages/vue/src/components/focus-trap/focus-trap.stories.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import Autofocus from './examples/autofocus.vue'
 import Basic from './examples/basic.vue'
 import InitialFocus from './examples/initial-focus.vue'
-import Autofocus from './examples/autofocus.vue'
 </script>
 
 <template>
diff --git a/packages/vue/src/components/focus-trap/focus-trap.vue b/packages/vue/src/components/focus-trap/focus-trap.vue
index e50500060b..6bc4e17a04 100644
--- a/packages/vue/src/components/focus-trap/focus-trap.vue
+++ b/packages/vue/src/components/focus-trap/focus-trap.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { HTMLAttributes, VNodeRef } from 'vue'
 import type { PolymorphicProps } from '../factory'
-import type { BaseProps, BaseEmits } from './focus-trap.types'
+import type { BaseEmits, BaseProps } from './focus-trap.types'
 
 export interface FocusTrapBaseProps extends BaseProps, PolymorphicProps {}
 export interface FocusTrapProps
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index f5ee2aff16..0e2dd40018 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -44,4 +44,5 @@ export * from './toast'
 export * from './toggle'
 export * from './toggle-group'
 export * from './tooltip'
+export * from './tour'
 export * from './tree-view'
diff --git a/packages/vue/src/components/tour/examples/basic.vue b/packages/vue/src/components/tour/examples/basic.vue
new file mode 100644
index 0000000000..68fd24c4d9
--- /dev/null
+++ b/packages/vue/src/components/tour/examples/basic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Frame } from '@ark-ui/vue/frame'
+import DemoTour from './tour.vue'
+</script>
+
+<template>
+  <main>
+    <DemoTour />
+    <div class="tour">
+      <div class="steps__container">
+        <h3 id="step-1">Step 1</h3>
+        <div class="overflow__container">
+          <div class="h-200px" />
+          <h3 id="step-2">Step 2</h3>
+          <div class="h-100px" />
+        </div>
+        <Frame>
+          <h1 id="step-2a">Iframe Content</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
+          </p>
+        </Frame>
+        <h3 id="step-3">Step 3</h3>
+        <h3 id="step-4">Step 4</h3>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/packages/vue/src/components/tour/examples/steps.tsx b/packages/vue/src/components/tour/examples/steps.tsx
new file mode 100644
index 0000000000..3e0228008c
--- /dev/null
+++ b/packages/vue/src/components/tour/examples/steps.tsx
@@ -0,0 +1,90 @@
+import type { TourStepDetails } from '@ark-ui/vue/tour'
+
+export const steps: TourStepDetails[] = [
+  {
+    type: 'dialog',
+    id: 'step-0',
+    title: 'Centered tour (no target)',
+    description: 'This is the center of the world. Ready to start the tour?',
+    actions: [{ label: 'Next', action: 'next' }],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-1',
+    title: 'Step 1. Welcome',
+    description: 'To the new world',
+    target: () => document.querySelector<HTMLElement>('#step-1'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+    effect({ show, update }) {
+      const abort = new AbortController()
+
+      fetch('https://api.github.com/users/octocat', { signal: abort.signal })
+        .then((res) => res.json())
+        .then((data) => {
+          update({ title: data.name })
+          show()
+        })
+
+      return () => {
+        abort.abort()
+      }
+    },
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#step-2'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2a',
+    title: 'Step 2a. Inside an Iframe container',
+    description: 'It calculates the offset rect correctly. Thanks to floating UI!',
+    target: () => {
+      const [frameEl] = Array.from(frames)
+      return frameEl?.document.querySelector<HTMLElement>('#step-2a')
+    },
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-3',
+    title: 'Step 3. Normal scrolling',
+    description: 'The new world is a great place',
+    target: () => document.querySelector<HTMLElement>('#step-3'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-4',
+    title: 'Step 4. Close to bottom',
+    description: 'So nice to see the scrolling works!',
+    target: () => document.querySelector<HTMLElement>('#step-4'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'dialog',
+    id: 'step-5',
+    title: "You're all sorted! (no target)",
+    description: 'Thanks for trying out the tour. Enjoy the app!',
+    actions: [{ label: 'Finish', action: 'dismiss' }],
+  },
+]
diff --git a/packages/vue/src/components/tour/examples/tour.vue b/packages/vue/src/components/tour/examples/tour.vue
new file mode 100644
index 0000000000..b2706308b9
--- /dev/null
+++ b/packages/vue/src/components/tour/examples/tour.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Tour, useTour } from '@ark-ui/vue/tour'
+import { XIcon } from 'lucide-vue-next'
+import { onMounted } from 'vue'
+import { steps } from './steps'
+
+const tour = useTour({ steps })
+
+onMounted(() => {
+  tour.value.start()
+})
+</script>
+
+<template>
+  <Tour.Root :tour="tour">
+    <Tour.Backdrop />
+    <Tour.Spotlight />
+    <Tour.Positioner>
+      <Tour.Content>
+        <Tour.Arrow>
+          <Tour.ArrowTip />
+        </Tour.Arrow>
+        <Tour.Title />
+        <Tour.Description />
+        <Tour.ProgressText />
+        <Tour.CloseTrigger>
+          <XIcon />
+        </Tour.CloseTrigger>
+        <Tour.Control>
+          <Tour.Actions v-slot="actions">
+            <Tour.ActionTrigger v-for="action in actions" :key="action.label" :action="action" />
+          </Tour.Actions>
+        </Tour.Control>
+      </Tour.Content>
+    </Tour.Positioner>
+  </Tour.Root>
+</template>
diff --git a/packages/vue/src/components/tour/index.ts b/packages/vue/src/components/tour/index.ts
new file mode 100644
index 0000000000..541358580d
--- /dev/null
+++ b/packages/vue/src/components/tour/index.ts
@@ -0,0 +1,74 @@
+export type { StepDetails as TourStepDetails } from '@zag-js/tour'
+export {
+  default as TourActionTrigger,
+  type TourActionTriggerBaseProps,
+  type TourActionTriggerProps,
+} from './tour-action-trigger.vue'
+export { default as TourActions, type TourActionsProps } from './tour-actions.vue'
+export {
+  default as TourArrowTip,
+  type TourArrowTipBaseProps,
+  type TourArrowTipProps,
+} from './tour-arrow-tip.vue'
+export {
+  default as TourArrow,
+  type TourArrowBaseProps,
+  type TourArrowProps,
+} from './tour-arrow.vue'
+export {
+  default as TourBackdrop,
+  type TourBackdropBaseProps,
+  type TourBackdropProps,
+} from './tour-backdrop.vue'
+export {
+  default as TourCloseTrigger,
+  type TourCloseTriggerBaseProps,
+  type TourCloseTriggerProps,
+} from './tour-close-trigger.vue'
+export {
+  default as TourContent,
+  type TourContentBaseProps,
+  type TourContentProps,
+} from './tour-content.vue'
+export { default as TourContext, type TourContextProps } from './tour-context.vue'
+export {
+  default as TourControl,
+  type TourControlBaseProps,
+  type TourControlProps,
+} from './tour-control.vue'
+export {
+  default as TourDescription,
+  type TourDescriptionBaseProps,
+  type TourDescriptionProps,
+} from './tour-description.vue'
+export {
+  default as TourPositioner,
+  type TourPositionerBaseProps,
+  type TourPositionerProps,
+} from './tour-positioner.vue'
+export {
+  default as TourProgressText,
+  type TourProgressTextBaseProps,
+  type TourProgressTextProps,
+} from './tour-progress-text.vue'
+export {
+  default as TourRoot,
+  type TourRootBaseProps,
+  type TourRootEmits,
+  type TourRootProps,
+} from './tour-root.vue'
+export {
+  default as TourSpotlight,
+  type TourSpotlightBaseProps,
+  type TourSpotlightProps,
+} from './tour-spotlight.vue'
+export {
+  default as TourTitle,
+  type TourTitleBaseProps,
+  type TourTitleProps,
+} from './tour-title.vue'
+export { tourAnatomy } from './tour.anatomy'
+export { useTour, type UseTourProps, type UseTourReturn } from './use-tour'
+export { useTourContext, type UseTourContext } from './use-tour-context'
+
+export * as Tour from './tour'
diff --git a/packages/vue/src/components/tour/tour-action-trigger.vue b/packages/vue/src/components/tour/tour-action-trigger.vue
new file mode 100644
index 0000000000..501c1ef71b
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-action-trigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { StepActionTriggerProps } from '@zag-js/tour'
+import type { ButtonHTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourActionTriggerBaseProps extends StepActionTriggerProps, PolymorphicProps {}
+export interface TourActionTriggerProps
+  extends TourActionTriggerBaseProps,
+    /**
+     * @vue-ignore
+     */
+    ButtonHTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+const props = defineProps<TourActionTriggerBaseProps>()
+const tour = useTourContext()
+const slots = defineSlots()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.button v-bind="tour.getActionTriggerProps(props)" :as-child="asChild">
+    <slot>{{ slots.default?.() || props.action.label }}</slot>
+  </ark.button>
+</template>
diff --git a/packages/vue/src/components/tour/tour-actions.vue b/packages/vue/src/components/tour/tour-actions.vue
new file mode 100644
index 0000000000..10bb49e05b
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-actions.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { StepAction } from '@zag-js/tour'
+import type { SlotsType, UnwrapRef } from 'vue'
+
+export interface TourActionsProps
+  extends SlotsType<{
+    default: UnwrapRef<StepAction[]>
+  }> {}
+</script>
+
+<script setup lang="ts">
+import { useTourContext } from './use-tour-context'
+
+const tour = useTourContext()
+
+defineSlots<{
+  default(tour: UnwrapRef<StepAction[]>): unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="tour.step?.actions ?? []"></slot>
+</template>
diff --git a/packages/vue/src/components/tour/tour-arrow-tip.vue b/packages/vue/src/components/tour/tour-arrow-tip.vue
new file mode 100644
index 0000000000..985420ed63
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-arrow-tip.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourArrowTipBaseProps extends PolymorphicProps {}
+export interface TourArrowTipProps
+  extends TourArrowTipBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourArrowTipProps>()
+const tour = useTourContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-bind="tour.getArrowTipProps()" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-arrow.vue b/packages/vue/src/components/tour/tour-arrow.vue
new file mode 100644
index 0000000000..9f031764a1
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-arrow.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourArrowBaseProps extends PolymorphicProps {}
+export interface TourArrowProps
+  extends TourArrowBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourArrowProps>()
+const tour = useTourContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-if="tour.step?.arrow" v-bind="tour.getArrowProps()" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-backdrop.vue b/packages/vue/src/components/tour/tour-backdrop.vue
new file mode 100644
index 0000000000..860d8c09f0
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-backdrop.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourBackdropBaseProps extends PolymorphicProps {}
+export interface TourBackdropProps
+  extends TourBackdropBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { useRenderStrategyProps, useForwardExpose } from '../../utils'
+import { Presence } from '../presence'
+import { useTourContext } from './use-tour-context'
+
+defineProps<TourBackdropProps>()
+const tour = useTourContext()
+const renderStrategy = useRenderStrategyProps()
+
+useForwardExpose()
+</script>
+
+<template>
+  <Presence
+    v-if="tour.step?.backdrop"
+    v-bind="tour.getBackdropProps()"
+    :hidden="!tour.open"
+    :present="tour.open"
+    :lazy-mount="renderStrategy.lazyMount"
+    :unmount-on-exit="renderStrategy.unmountOnExit"
+  >
+    <slot />
+  </Presence>
+</template>
diff --git a/packages/vue/src/components/tour/tour-close-trigger.vue b/packages/vue/src/components/tour/tour-close-trigger.vue
new file mode 100644
index 0000000000..b13749b9b7
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-close-trigger.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { ButtonHTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourCloseTriggerBaseProps extends PolymorphicProps {}
+export interface TourCloseTriggerProps
+  extends TourCloseTriggerBaseProps,
+    /**
+     * @vue-ignore
+     */
+    ButtonHTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourCloseTriggerProps>()
+const tour = useTourContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.button v-bind="tour.getCloseTriggerProps()" :as-child="asChild">
+    <slot />
+  </ark.button>
+</template>
diff --git a/packages/vue/src/components/tour/tour-content.vue b/packages/vue/src/components/tour/tour-content.vue
new file mode 100644
index 0000000000..49eacbab8c
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-content.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import { mergeProps } from '@zag-js/vue'
+import { type HTMLAttributes, computed } from 'vue'
+import type { PolymorphicProps } from '../factory'
+import { usePresenceContext } from '../presence'
+
+export interface TourContentBaseProps extends PolymorphicProps {}
+export interface TourContentProps
+  extends TourContentBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourContentProps>()
+
+const tour = useTourContext()
+const presence = usePresenceContext()
+const mergedProps = computed(() =>
+  mergeProps(tour.value.getContentProps(), presence.value.presenceProps),
+)
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-if="!presence.unmounted" v-bind="mergedProps" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-context.vue b/packages/vue/src/components/tour/tour-context.vue
new file mode 100644
index 0000000000..beddb57911
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-context.vue
@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { SlotsType, UnwrapRef } from 'vue'
+import type { UseTourContext } from './use-tour-context'
+
+export interface TourContextProps
+  extends SlotsType<{
+    default: UnwrapRef<UseTourContext>
+  }> {}
+</script>
+
+<script setup lang="ts">
+import { useTourContext } from './use-tour-context'
+
+const tour = useTourContext()
+
+defineSlots<{
+  default(tour: UnwrapRef<UseTourContext>): unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="tour"></slot>
+</template>
diff --git a/packages/vue/src/components/tour/tour-control.vue b/packages/vue/src/components/tour/tour-control.vue
new file mode 100644
index 0000000000..5cb4358a56
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-control.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourControlBaseProps extends PolymorphicProps {}
+export interface TourControlProps
+  extends TourControlBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useForwardExpose } from '../../utils'
+import { tourAnatomy } from './tour.anatomy'
+
+defineProps<TourControlProps>()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-bind="{ ...tourAnatomy.build().control.attrs }" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-description.vue b/packages/vue/src/components/tour/tour-description.vue
new file mode 100644
index 0000000000..9c08014cd1
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-description.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourDescriptionBaseProps extends PolymorphicProps {}
+export interface TourDescriptionProps
+  extends TourDescriptionBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourDescriptionProps>()
+const tour = useTourContext()
+const slots = defineSlots()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-bind="tour.getDescriptionProps()" :as-child="asChild">
+    <slot>{{ slots.default?.() || tour.step?.title }}</slot>
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-positioner.vue b/packages/vue/src/components/tour/tour-positioner.vue
new file mode 100644
index 0000000000..692546ab0f
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-positioner.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { useRenderStrategyProps } from '../../utils'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourPositionerBaseProps extends PolymorphicProps {}
+export interface TourPositionerProps
+  extends TourPositionerBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { PresenceProvider, usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourPositionerProps>()
+
+const tour = useTourContext()
+const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: tour.value.open,
+  })),
+)
+PresenceProvider(presence)
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-if="!presence.unmounted" v-bind="tour.getPositionerProps()" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-progress-text.vue b/packages/vue/src/components/tour/tour-progress-text.vue
new file mode 100644
index 0000000000..fb7b8e0d50
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-progress-text.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourProgressTextBaseProps extends PolymorphicProps {}
+export interface TourProgressTextProps
+  extends TourProgressTextBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourProgressTextProps>()
+const tour = useTourContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-bind="tour.getProgressTextProps()" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-root.vue b/packages/vue/src/components/tour/tour-root.vue
new file mode 100644
index 0000000000..49106b082b
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-root.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { RenderStrategyProps } from '../../utils'
+import type { RootEmits } from './tour.types'
+import type { UseTourReturn } from './use-tour'
+
+interface RootProps {
+  tour: UnwrapRef<UseTourReturn>
+}
+
+export interface TourRootBaseProps extends RootProps, RenderStrategyProps {}
+export interface TourRootProps extends TourRootBaseProps {}
+export interface TourRootEmits extends RootEmits {}
+</script>
+
+<script setup lang="ts">
+import { computed, type UnwrapRef } from 'vue'
+import { RenderStrategyPropsProvider, useForwardExpose } from '../../utils'
+import { TourProvider } from './use-tour-context'
+
+const props = defineProps<TourRootProps>()
+const tour = computed(() => props.tour)
+
+TourProvider(tour)
+RenderStrategyPropsProvider(
+  computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })),
+)
+
+useForwardExpose()
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/vue/src/components/tour/tour-spotlight.vue b/packages/vue/src/components/tour/tour-spotlight.vue
new file mode 100644
index 0000000000..8a1f19b880
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-spotlight.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { useRenderStrategyProps } from '../../utils'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourSpotlightBaseProps extends PolymorphicProps {}
+export interface TourSpotlightProps
+  extends TourSpotlightBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { PresenceProvider, usePresence } from '../presence'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourSpotlightProps>()
+
+const tour = useTourContext()
+const renderStrategy = useRenderStrategyProps()
+
+const presence = usePresence(
+  computed(() => ({
+    ...renderStrategy.value,
+    present: tour.value.open,
+  })),
+)
+PresenceProvider(presence)
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div
+    v-if="!presence.unmounted"
+    v-bind="tour.getSpotlightProps()"
+    :hidden="!tour.open || !tour.step?.target?.()"
+    :as-child="asChild"
+  >
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/tour/tour-title.vue b/packages/vue/src/components/tour/tour-title.vue
new file mode 100644
index 0000000000..f4e23eab7e
--- /dev/null
+++ b/packages/vue/src/components/tour/tour-title.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+
+export interface TourTitleBaseProps extends PolymorphicProps {}
+export interface TourTitleProps
+  extends TourTitleBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useTourContext } from './use-tour-context'
+import { useForwardExpose } from '../../utils'
+
+defineProps<TourTitleProps>()
+const tour = useTourContext()
+const slots = defineSlots()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.h2 v-bind="tour.getTitleProps()" :as-child="asChild">
+    <slot>{{ slots.default?.() || tour.step?.title }}</slot>
+  </ark.h2>
+</template>
diff --git a/packages/vue/src/components/tour/tour.anatomy.ts b/packages/vue/src/components/tour/tour.anatomy.ts
new file mode 100644
index 0000000000..c7ae3bb0b8
--- /dev/null
+++ b/packages/vue/src/components/tour/tour.anatomy.ts
@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/tour'
+
+export const tourAnatomy = anatomy.extendWith('control')
diff --git a/packages/vue/src/components/tour/tour.stories.vue b/packages/vue/src/components/tour/tour.stories.vue
new file mode 100644
index 0000000000..706b413780
--- /dev/null
+++ b/packages/vue/src/components/tour/tour.stories.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Basic from './examples/basic.vue'
+</script>
+
+<template>
+  <Story title="Tour">
+    <Variant title="Basic">
+      <Basic />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/vue/src/components/tour/tour.ts b/packages/vue/src/components/tour/tour.ts
new file mode 100644
index 0000000000..030f5a4282
--- /dev/null
+++ b/packages/vue/src/components/tour/tour.ts
@@ -0,0 +1,84 @@
+export type {
+  Point,
+  ProgressTextDetails,
+  StatusChangeDetails,
+  StepAction,
+  StepActionMap,
+  StepActionTriggerProps,
+  StepBaseDetails,
+  StepChangeDetails,
+  StepDetails,
+  StepEffectArgs,
+  StepPlacement,
+  StepStatus,
+  StepType,
+  WaitOptions,
+} from '@zag-js/tour'
+export {
+  default as ActionTrigger,
+  type TourActionTriggerBaseProps as ActionTriggerBaseProps,
+  type TourActionTriggerProps as ActionTriggerProps,
+} from './tour-action-trigger.vue'
+export { default as Actions, type TourActionsProps as ActionsProps } from './tour-actions.vue'
+export {
+  default as Arrow,
+  type TourArrowBaseProps as ArrowBaseProps,
+  type TourArrowProps as ArrowProps,
+} from './tour-arrow.vue'
+export {
+  default as ArrowTip,
+  type TourArrowTipBaseProps as ArrowTipBaseProps,
+  type TourArrowTipProps as ArrowTipProps,
+} from './tour-arrow-tip.vue'
+export {
+  default as Backdrop,
+  type TourBackdropBaseProps as BackdropBaseProps,
+  type TourBackdropProps as BackdropProps,
+} from './tour-backdrop.vue'
+export {
+  default as CloseTrigger,
+  type TourCloseTriggerBaseProps as CloseTriggerBaseProps,
+  type TourCloseTriggerProps as CloseTriggerProps,
+} from './tour-close-trigger.vue'
+export {
+  default as Content,
+  type TourContentBaseProps as ContentBaseProps,
+  type TourContentProps as ContentProps,
+} from './tour-content.vue'
+export { default as Context, type TourContextProps as ContextProps } from './tour-context.vue'
+export {
+  default as Control,
+  type TourControlBaseProps as ControlBaseProps,
+  type TourControlProps as ControlProps,
+} from './tour-control.vue'
+export {
+  default as Description,
+  type TourDescriptionBaseProps as DescriptionBaseProps,
+  type TourDescriptionProps as DescriptionProps,
+} from './tour-description.vue'
+export {
+  default as Positioner,
+  type TourPositionerBaseProps as PositionerBaseProps,
+  type TourPositionerProps as PositionerProps,
+} from './tour-positioner.vue'
+export {
+  default as ProgressText,
+  type TourProgressTextBaseProps as ProgressTextBaseProps,
+  type TourProgressTextProps as ProgressTextProps,
+} from './tour-progress-text.vue'
+export {
+  default as Root,
+  type TourRootBaseProps as RootBaseProps,
+  type TourRootProps as RootProps,
+  type TourRootEmits as RootEmits,
+} from './tour-root.vue'
+export {
+  default as Spotlight,
+  type TourSpotlightBaseProps as SpotlightBaseProps,
+  type TourSpotlightProps as SpotlightProps,
+} from './tour-spotlight.vue'
+export {
+  default as Title,
+  type TourTitleBaseProps as TitleBaseProps,
+  type TourTitleProps as TitleProps,
+} from './tour-title.vue'
diff --git a/packages/vue/src/components/tour/tour.types.ts b/packages/vue/src/components/tour/tour.types.ts
new file mode 100644
index 0000000000..e259ddc34a
--- /dev/null
+++ b/packages/vue/src/components/tour/tour.types.ts
@@ -0,0 +1,84 @@
+import type * as tour from '@zag-js/tour'
+
+export interface RootProps {
+  /**
+   * Whether to close the tour when the user presses the escape key
+   * @default true
+   */
+  closeOnEscape?: boolean
+  /**
+   * Whether to close the tour when the user clicks outside the tour
+   * @default true
+   */
+  closeOnInteractOutside?: boolean
+  /**
+   * The unique identifier of the machine.
+   */
+  id?: string
+  /**
+   * The ids of the elements in the tour. Useful for composition.
+   */
+  ids?: Partial<{
+    content: string
+    title: string
+    description: string
+    positioner: string
+    backdrop: string
+    arrow: string
+  }>
+  /**
+   * Whether to allow keyboard navigation (right/left arrow keys to navigate between steps)
+   * @default true
+   */
+  keyboardNavigation?: boolean
+  /**
+   * Prevents interaction with the rest of the page while the tour is open
+   * @default false
+   */
+  preventInteraction?: boolean
+  /**
+   * The offsets to apply to the spotlight
+   * @default "{ x: 10, y: 10 }"
+   */
+  spotlightOffset?: tour.Point
+  /**
+   * The radius of the spotlight clip path
+   * @default 4
+   */
+  spotlightRadius?: number
+  /**
+   * The id of the currently highlighted step
+   */
+  stepId?: string
+  /**
+   * The steps of the tour
+   */
+  steps?: tour.StepDetails[]
+  /**
+   * The translations for the tour
+   */
+  translations?: tour.IntlTranslations
+}
+
+export type RootEmits = {
+  /**
+   * Function called when the focus is moved outside the component
+   */
+  focusOutside: [event: tour.FocusOutsideEvent]
+  /**
+   * Function called when an interaction happens outside the component
+   */
+  interactOutside: [event: tour.InteractOutsideEvent]
+  /**
+   * Function called when the pointer is pressed down outside the component
+   */
+  pointerDownOutside: [event: tour.PointerDownOutsideEvent]
+  /**
+   * Callback when the tour is opened or closed
+   */
+  statusChange: [details: tour.StatusChangeDetails]
+  /**
+   * Callback when the highlighted step changes
+   */
+  stepChange: [details: tour.StepChangeDetails]
+}
diff --git a/packages/vue/src/components/tour/use-tour-context.ts b/packages/vue/src/components/tour/use-tour-context.ts
new file mode 100644
index 0000000000..f2c574dfde
--- /dev/null
+++ b/packages/vue/src/components/tour/use-tour-context.ts
@@ -0,0 +1,6 @@
+import { createContext } from '../../utils'
+import type { UseTourReturn } from './use-tour'
+
+export interface UseTourContext extends UseTourReturn {}
+
+export const [TourProvider, useTourContext] = createContext<UseTourContext>('TourContext')
diff --git a/packages/vue/src/components/tour/use-tour.ts b/packages/vue/src/components/tour/use-tour.ts
new file mode 100644
index 0000000000..6460a52413
--- /dev/null
+++ b/packages/vue/src/components/tour/use-tour.ts
@@ -0,0 +1,32 @@
+import * as tour from '@zag-js/tour'
+import { type PropTypes, normalizeProps, useMachine } from '@zag-js/vue'
+import { type ComputedRef, computed, useId } from 'vue'
+import { DEFAULT_LOCALE, useEnvironmentContext, useLocaleContext } from '../../providers'
+import type { EmitFn, Optional } from '../../types'
+import { cleanProps } from '../../utils'
+import type { RootEmits } from './tour'
+
+export interface UseTourProps extends Optional<Omit<tour.Context, 'dir' | 'getRootNode'>, 'id'> {}
+export interface UseTourReturn extends ComputedRef<tour.Api<PropTypes>> {}
+
+export const useTour = (props: UseTourProps = {}, emit?: EmitFn<RootEmits>) => {
+  const id = useId()
+  const env = useEnvironmentContext()
+  const locale = useLocaleContext(DEFAULT_LOCALE)
+
+  const context = computed<tour.Context>(() => ({
+    id,
+    dir: locale.value.dir,
+    getRootNode: env?.value.getRootNode,
+    onFocusOutside: (details) => emit?.('focusOutside', details),
+    onInteractOutside: (details) => emit?.('interactOutside', details),
+    onPointerDownOutside: (details) => emit?.('pointerDownOutside', details),
+    onStatusChange: (details) => emit?.('statusChange', details),
+    onStepChange: (details) => emit?.('stepChange', details),
+    ...cleanProps(props),
+  }))
+
+  const [state, send] = useMachine(tour.machine(context.value), { context })
+
+  return computed(() => tour.connect(state.value, send, normalizeProps))
+}
diff --git a/scripts/src/check-exports.ts b/scripts/src/check-exports.ts
index 3fb1276a17..68f206fce7 100644
--- a/scripts/src/check-exports.ts
+++ b/scripts/src/check-exports.ts
@@ -1,5 +1,5 @@
-import { globby } from 'globby'
 import { readFileSync } from 'node:fs'
+import { globby } from 'globby'
 import { type ExportDeclaration, Node, Project } from 'ts-morph'
 
 const frameworks = ['react', 'solid', 'vue']
diff --git a/scripts/src/check-nodes.ts b/scripts/src/check-nodes.ts
index e1f04fa1bb..561b207b7e 100644
--- a/scripts/src/check-nodes.ts
+++ b/scripts/src/check-nodes.ts
@@ -1,6 +1,6 @@
+import { parse } from 'node:path'
 import { readFileSync } from 'fs-extra'
 import { globby } from 'globby'
-import { parse } from 'node:path'
 
 const main = async () => {
   const components = await globby(['../packages/*/src/components/dialog/*.{tsx,vue}'])
diff --git a/scripts/src/exports-check-local.ts b/scripts/src/exports-check-local.ts
index 666cdfba15..04c64edf05 100644
--- a/scripts/src/exports-check-local.ts
+++ b/scripts/src/exports-check-local.ts
@@ -1,6 +1,6 @@
-import { globby } from 'globby'
 import { readFileSync } from 'node:fs'
 import { basename, dirname } from 'node:path'
+import { globby } from 'globby'
 import { type ExportDeclaration, Node, Project } from 'ts-morph'
 
 const main = async () => {
diff --git a/scripts/src/exports-sync.ts b/scripts/src/exports-sync.ts
index 073c56f6fe..732c1fcd7b 100644
--- a/scripts/src/exports-sync.ts
+++ b/scripts/src/exports-sync.ts
@@ -1,6 +1,6 @@
+import { basename, dirname } from 'node:path'
 import { copyFileSync } from 'fs-extra'
 import { globby } from 'globby'
-import { basename, dirname } from 'node:path'
 
 const main = async () => {
   const files = await globby(['../packages/react/src/components/*/index.ts'], {})
diff --git a/scripts/src/extend-types-with-tags.ts b/scripts/src/extend-types-with-tags.ts
index 4b6a7a647f..839fa95ebf 100644
--- a/scripts/src/extend-types-with-tags.ts
+++ b/scripts/src/extend-types-with-tags.ts
@@ -1,6 +1,6 @@
+import { parse } from 'node:path'
 import { readFileSync, readJsonSync, writeJsonSync } from 'fs-extra'
 import { globby } from 'globby'
-import { parse } from 'node:path'
 
 const toPascalCase = (input: string): string =>
   input
diff --git a/scripts/src/generate-prompt.ts b/scripts/src/generate-prompt.ts
index 4a2e8b2deb..b5ce14e98d 100644
--- a/scripts/src/generate-prompt.ts
+++ b/scripts/src/generate-prompt.ts
@@ -1,7 +1,7 @@
-import * as Bun from 'bun'
 import { parse } from 'node:path'
 import { join } from 'node:path/posix'
 import { parseArgs } from 'node:util'
+import * as Bun from 'bun'
 import { format } from 'prettier'
 
 const toTitleCase = (str: string) => {
diff --git a/scripts/src/generate-type-docs.ts b/scripts/src/generate-type-docs.ts
index 833423db71..5f159bdde4 100644
--- a/scripts/src/generate-type-docs.ts
+++ b/scripts/src/generate-type-docs.ts
@@ -1,8 +1,8 @@
+import { readFile } from 'node:fs/promises'
+import path, { dirname } from 'node:path'
 import { findUpSync } from 'find-up'
 import fs from 'fs-extra'
 import { globby, globbySync } from 'globby'
-import { readFile } from 'node:fs/promises'
-import path, { dirname } from 'node:path'
 import prettier from 'prettier'
 import { type ExportDeclaration, Node, Project } from 'ts-morph'
 import ts from 'typescript'
diff --git a/scripts/src/generate-vue-props.ts b/scripts/src/generate-vue-props.ts
index d08bc2b80c..b6d6fd7809 100644
--- a/scripts/src/generate-vue-props.ts
+++ b/scripts/src/generate-vue-props.ts
@@ -1,5 +1,5 @@
-import { globby } from 'globby'
 import { parse } from 'node:path'
+import { globby } from 'globby'
 import { type OptionalKind, Project, type PropertySignatureStructure } from 'ts-morph'
 import { chain } from 'voca'
 
diff --git a/scripts/src/play.ts b/scripts/src/play.ts
index 91ccb5d7f6..1b4dde162b 100644
--- a/scripts/src/play.ts
+++ b/scripts/src/play.ts
@@ -1,6 +1,6 @@
-import { globby } from 'globby'
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import { globby } from 'globby'
 
 const anatomies = await globby('../packages/anatomy/src/*/index.ts')
 
diff --git a/scripts/src/release-prepare.ts b/scripts/src/release-prepare.ts
index 1170676b67..e736a14222 100644
--- a/scripts/src/release-prepare.ts
+++ b/scripts/src/release-prepare.ts
@@ -1,7 +1,7 @@
+import { basename, dirname, join, parse } from 'node:path'
 import { findUpSync } from 'find-up'
 import fs from 'fs-extra'
 import { globby } from 'globby'
-import { basename, dirname, join, parse } from 'node:path'
 import { match } from 'ts-pattern'
 
 /**
diff --git a/scripts/src/symlink.ts b/scripts/src/symlink.ts
index c3a10b6189..e2ed0ba2f2 100644
--- a/scripts/src/symlink.ts
+++ b/scripts/src/symlink.ts
@@ -1,8 +1,8 @@
-import { findPackages } from 'find-packages'
-import { findUpSync } from 'find-up'
 import { spawnSync } from 'node:child_process'
 import { readFileSync, writeFileSync } from 'node:fs'
 import { dirname, relative, resolve } from 'node:path'
+import { findPackages } from 'find-packages'
+import { findUpSync } from 'find-up'
 
 async function getZagPackages(): Promise<Record<string, string>> {
   const lockFilePath = findUpSync('bun.lockb')
@@ -60,7 +60,9 @@ async function main() {
     Object.assign(packageJson.overrides, overrides)
 
     writeFileSync('../package.json', JSON.stringify(packageJson, null, 2))
-    spawnSync('cp', [lockFilePath, `${lockFilePath}.copy`], { stdio: 'inherit' })
+    spawnSync('cp', [lockFilePath, `${lockFilePath}.copy`], {
+      stdio: 'inherit',
+    })
   }
 
   spawnSync('bun', ['install'], { stdio: 'inherit' })
diff --git a/website/panda.config.ts b/website/panda.config.ts
index 99ad1630e9..7ab8297e19 100644
--- a/website/panda.config.ts
+++ b/website/panda.config.ts
@@ -3,6 +3,8 @@ import { createPreset } from '@park-ui/panda-preset'
 import sand from '@park-ui/panda-preset/colors/sand'
 import typographyPreset from 'pandacss-preset-typography'
 import { coral } from '~/coral'
+import { field } from '~/theme/recipes/field'
+import { tour } from '~/theme/recipes/tour'
 
 export default defineConfig({
   preflight: true,
@@ -58,6 +60,9 @@ export default defineConfig({
         flexGrow: '1',
         fontFamily: 'body',
       },
+      '*::selection': {
+        bg: 'gray.3',
+      },
       pre: {
         background: 'transparent!',
         overflowX: 'auto',
@@ -96,26 +101,8 @@ export default defineConfig({
         },
       },
       slotRecipes: {
-        field: {
-          className: 'field',
-          slots: ['root', 'label', 'input', 'textarea', 'select', 'helperText', 'errorText'],
-          base: {
-            root: {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '1.5',
-            },
-            label: {
-              color: 'fg.default',
-              fontWeight: 'medium',
-              textStyle: 'sm',
-            },
-            helperText: {
-              color: 'fg.muted',
-              textStyle: 'sm',
-            },
-          },
-        },
+        field,
+        tour,
         layout: {
           className: 'layout',
           slots: ['aside', 'main'],
diff --git a/website/src/app/api/lemon/webhook/route.ts b/website/src/app/api/lemon/webhook/route.ts
index cd421c05f5..4f8205ccd0 100644
--- a/website/src/app/api/lemon/webhook/route.ts
+++ b/website/src/app/api/lemon/webhook/route.ts
@@ -1,7 +1,7 @@
+import crypto from 'node:crypto'
 import { Schema } from '@effect/schema'
 import { Effect, Match, pipe } from 'effect'
 import type { NextRequest } from 'next/server'
-import crypto from 'node:crypto'
 import { generateLicenseKey } from '~/lib/license-key'
 import { prisma } from '~/lib/prisma'
 
diff --git a/website/src/app/api/types/[framework]/[component]/route.ts b/website/src/app/api/types/[framework]/[component]/route.ts
index fe601865fa..f1e90a3ea0 100644
--- a/website/src/app/api/types/[framework]/[component]/route.ts
+++ b/website/src/app/api/types/[framework]/[component]/route.ts
@@ -1,5 +1,5 @@
-import { types } from '.velite'
 import type { NextRequest } from 'next/server'
+import { types } from '.velite'
 
 type Params = Promise<{ framework: string; component: string }>
 
diff --git a/website/src/app/api/types/[framework]/route.ts b/website/src/app/api/types/[framework]/route.ts
index a0ee2b99f1..510573295c 100644
--- a/website/src/app/api/types/[framework]/route.ts
+++ b/website/src/app/api/types/[framework]/route.ts
@@ -1,5 +1,5 @@
-import { types } from '.velite'
 import type { NextRequest } from 'next/server'
+import { types } from '.velite'
 
 type Params = Promise<{ framework: string }>
 
diff --git a/website/src/app/global.css b/website/src/app/global.css
index 0454f3529d..66ac514457 100644
--- a/website/src/app/global.css
+++ b/website/src/app/global.css
@@ -5,3 +5,7 @@
   display: inline-block;
   width: 100%;
 }
+
+body {
+  position: relative;
+}
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index ecd4cdc395..a144b87e68 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -9,7 +9,10 @@ import { Toaster } from '~/components/toaster'
 import './global.css'
 
 const outfit = Outfit({ subsets: ['latin'], variable: '--font-outfit' })
-const roboto = Roboto_Mono({ subsets: ['latin'], variable: '--font-roboto-mono' })
+const roboto = Roboto_Mono({
+  subsets: ['latin'],
+  variable: '--font-roboto-mono',
+})
 
 const description =
   'A headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.'
diff --git a/website/src/app/license/page.tsx b/website/src/app/license/page.tsx
index c197bd2338..163edd0e9b 100644
--- a/website/src/app/license/page.tsx
+++ b/website/src/app/license/page.tsx
@@ -1,10 +1,10 @@
-import { pages } from '.velite'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { Container, Stack } from 'styled-system/jsx'
 import { PageHeader } from '~/components/page-header'
 import { Prose } from '~/components/ui/prose'
 import { MDXContent } from '~/mdx-content'
+import { pages } from '.velite'
 
 export default function Page() {
   const page = getPageById('license')
diff --git a/website/src/components/component-types.tsx b/website/src/components/component-types.tsx
index c3c957b1b7..f24e241fae 100644
--- a/website/src/components/component-types.tsx
+++ b/website/src/components/component-types.tsx
@@ -1,10 +1,10 @@
-import { types } from '.velite'
 import { Fragment } from 'react'
 import { Heading } from '~/components/ui/heading'
 import { getServerContext } from '~/lib/server-context'
 import { DataAttrTable } from './data-attr-table'
 import { EmitsTable } from './emits-table'
 import { PropsTable } from './props-table'
+import { types } from '.velite'
 
 interface Props {
   id: string
diff --git a/website/src/components/example.tsx b/website/src/components/example.tsx
index a827a59fa6..f1bba29ad9 100644
--- a/website/src/components/example.tsx
+++ b/website/src/components/example.tsx
@@ -1,7 +1,7 @@
-import { transformerNotationHighlight } from '@shikijs/transformers'
-import { Match } from 'effect'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
+import { transformerNotationHighlight } from '@shikijs/transformers'
+import { Match } from 'effect'
 import { codeToHtml } from 'shiki'
 import { getServerContext } from '~/lib/server-context'
 import { CodeTabs } from './code-tabs'
diff --git a/website/src/components/marketing/showcases.tsx b/website/src/components/marketing/showcases.tsx
index ee2deb4850..4191091e2d 100644
--- a/website/src/components/marketing/showcases.tsx
+++ b/website/src/components/marketing/showcases.tsx
@@ -1,8 +1,8 @@
-import { showcases } from '.velite'
 import { cva } from 'styled-system/css'
 import { Container, Grid, GridItem, Stack, styled } from 'styled-system/jsx'
 import { SectionHeader } from '../section-header'
 import { Card } from '../ui/card'
+import { showcases } from '.velite'
 
 export const Showcases = () => {
   return (
diff --git a/website/src/components/navigation/docs/docs-footer.tsx b/website/src/components/navigation/docs/docs-footer.tsx
index ee85bea062..3204e27c88 100644
--- a/website/src/components/navigation/docs/docs-footer.tsx
+++ b/website/src/components/navigation/docs/docs-footer.tsx
@@ -1,5 +1,4 @@
 'use client'
-import type { Pages } from '.velite'
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
 import NextLink from 'next/link'
 import { useParams } from 'next/navigation'
@@ -7,6 +6,7 @@ import { css, cva, cx } from 'styled-system/css'
 import { HStack, Stack } from 'styled-system/jsx'
 import { Icon } from '~/components/ui/icon'
 import { Text } from '~/components/ui/text'
+import type { Pages } from '.velite'
 
 interface Props {
   prevPage?: Pages
diff --git a/website/src/components/navigation/docs/docs-sidebar.tsx b/website/src/components/navigation/docs/docs-sidebar.tsx
index ef24a0a1f2..560b8ecf0b 100644
--- a/website/src/components/navigation/docs/docs-sidebar.tsx
+++ b/website/src/components/navigation/docs/docs-sidebar.tsx
@@ -1,5 +1,4 @@
 'use client'
-import type { Pages } from '.velite'
 import { Collapsible } from '@ark-ui/react/collapsible'
 import { ChevronRightIcon } from 'lucide-react'
 import NextLink from 'next/link'
@@ -7,6 +6,7 @@ import { useParams, usePathname } from 'next/navigation'
 import { Badge } from '~/components/ui/badge'
 import { Icon } from '~/components/ui/icon'
 import { recipe } from '../sidebar.recipe'
+import type { Pages } from '.velite'
 
 const styles = recipe()
 
diff --git a/website/src/components/navigation/examples/examples-footer.tsx b/website/src/components/navigation/examples/examples-footer.tsx
index d0cb4460c0..1d2de6bf18 100644
--- a/website/src/components/navigation/examples/examples-footer.tsx
+++ b/website/src/components/navigation/examples/examples-footer.tsx
@@ -1,4 +1,3 @@
-import { pages } from '.velite'
 import NextLink from 'next/link'
 import { cva } from 'styled-system/css'
 import { Grid, Stack } from 'styled-system/jsx'
@@ -6,6 +5,7 @@ import { Heading } from '~/components/ui/heading'
 import { Text } from '~/components/ui/text'
 import type { Example } from '~/lib/examples'
 import { getServerContext } from '~/lib/server-context'
+import { pages } from '.velite'
 
 interface Props {
   example: Example
diff --git a/website/src/components/navigation/navbar.tsx b/website/src/components/navigation/navbar.tsx
index 8cc9e99eb6..2bfcdbfd5c 100644
--- a/website/src/components/navigation/navbar.tsx
+++ b/website/src/components/navigation/navbar.tsx
@@ -26,7 +26,9 @@ export const Navbar = () => {
           <HStack gap="3" py="1" display={{ base: 'none', md: 'flex' }}>
             <NavbarLinks framework={framework} />
             <Divider orientation="vertical" h="6" />
-            <FrameworkSelect />
+            <div id="framework-select">
+              <FrameworkSelect />
+            </div>
             <Divider orientation="vertical" h="6" />
             <HStack gap="2">
               <HStack gap="0">
diff --git a/website/src/components/navigation/sidebar-container.tsx b/website/src/components/navigation/sidebar-container.tsx
index b5b8a221df..342808a1ad 100644
--- a/website/src/components/navigation/sidebar-container.tsx
+++ b/website/src/components/navigation/sidebar-container.tsx
@@ -22,7 +22,9 @@ export const SidebarContainer = async (props: PropsWithChildren<Props>) => {
           <NextLink href="/" aria-label="Go to start page">
             <Logo />
           </NextLink>
-          <VersionSelect latest={version} />
+          <div id="version-select">
+            <VersionSelect latest={version} />
+          </div>
         </HStack>
       </Box>
       {props.children}
diff --git a/website/src/components/ui/primitives/tour.tsx b/website/src/components/ui/primitives/tour.tsx
new file mode 100644
index 0000000000..6ea08f8f3c
--- /dev/null
+++ b/website/src/components/ui/primitives/tour.tsx
@@ -0,0 +1,76 @@
+'use client'
+import type { Assign } from '@ark-ui/react'
+import { Tour } from '@ark-ui/react/tour'
+import { type TourVariantProps, tour } from 'styled-system/recipes'
+import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from '~/lib/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(tour)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Tour.RootProps, TourVariantProps>>(Tour.Root)
+
+export const Backdrop = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.BackdropBaseProps>
+>(Tour.Backdrop, 'backdrop')
+
+export const Spotlight = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.SpotlightBaseProps>
+>(Tour.Spotlight, 'spotlight')
+
+export const CloseTrigger = withContext<
+  HTMLButtonElement,
+  Assign<HTMLStyledProps<'button'>, Tour.CloseTriggerBaseProps>
+>(Tour.CloseTrigger, 'closeTrigger')
+
+export const Content = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.ContentBaseProps>
+>(Tour.Content, 'content')
+
+export const Description = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.DescriptionBaseProps>
+>(Tour.Description, 'description')
+
+export const Positioner = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.PositionerBaseProps>
+>(Tour.Positioner, 'positioner')
+
+export const Title = withContext<
+  HTMLHeadingElement,
+  Assign<HTMLStyledProps<'h2'>, Tour.TitleBaseProps>
+>(Tour.Title, 'title')
+
+export const Arrow = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.ArrowBaseProps>
+>(Tour.Arrow, 'arrow')
+
+export const ArrowTip = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.ArrowTipBaseProps>
+>(Tour.ArrowTip, 'arrowTip')
+
+export const ProgressText = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.ProgressTextBaseProps>
+>(Tour.ProgressText, 'progressText')
+
+export const ActionTrigger = withContext<
+  HTMLButtonElement,
+  Assign<HTMLStyledProps<'button'>, Tour.ActionTriggerBaseProps>
+>(Tour.ActionTrigger, 'actionTrigger')
+
+export const Control = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Tour.ControlBaseProps>
+>(Tour.Control, 'control')
+
+export const Context = Tour.Context
+export const Actions = Tour.Actions
+
+export type StepDetails = Tour.StepDetails
diff --git a/website/src/components/ui/tour.tsx b/website/src/components/ui/tour.tsx
new file mode 100644
index 0000000000..9ea14bb9c4
--- /dev/null
+++ b/website/src/components/ui/tour.tsx
@@ -0,0 +1,2 @@
+export { useTour } from '@ark-ui/react/tour'
+export * as Tour from './primitives/tour'
diff --git a/website/src/content/pages/components/tour.mdx b/website/src/content/pages/components/tour.mdx
new file mode 100644
index 0000000000..5aa4ccb62f
--- /dev/null
+++ b/website/src/content/pages/components/tour.mdx
@@ -0,0 +1,205 @@
+---
+id: tour
+title: Tour
+description: A guided tour that helps users understand the interface.
+status: new
+---
+
+<ComponentPreview id="Tour" />
+
+## Features
+
+- Support for different step types such as "dialog", "floating", "tooltip" or "wait"
+- Support for customizable content per step
+- Wait steps for waiting for a specific selector to appear on the page before showing the next step
+- Flexible positioning of the tour dialog per step
+- Progress tracking shows users their progress through the tour
+
+## Anatomy
+
+To set up the tour correctly, it's essential to understand its anatomy and the naming of its parts.
+
+> Each part includes a `data-part` attribute to help identify them in the DOM.
+
+<Anatomy id="tour" />
+
+## Steps
+
+### Using step types
+
+The tour machine supports different types of steps, allowing you to create a
+diverse and interactive tour experience. The available step types are defined in
+the `StepType` type:
+
+- `tooltip`: Displays the step content as a tooltip, typically positioned near
+  the target element.
+
+- `dialog`: Shows the step content in a modal dialog centered on screen,
+  useful for starting or ending the tour. This usually don't have a `target`
+  defined.
+
+- `floating`: Presents the step content as a floating element, which can be
+  positioned flexibly on the screen. This usually don't have a `target` defined.
+
+- `wait`: A special type that waits for a specific condition before proceeding
+  to the next step.
+
+```tsx
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'tooltip',
+    placement: 'top-start',
+    target: () => document.querySelector('#target-1'),
+    title: 'Tooltip Step',
+    description: 'This is a tooltip step',
+  },
+  {
+    id: 'step-2',
+    type: 'dialog',
+    title: 'Dialog Step',
+    description: 'This is a dialog step',
+  },
+  {
+    id: 'step-3',
+    type: 'floating',
+    placement: 'top-start',
+    title: 'Floating Step',
+    description: 'This is a floating step',
+  },
+  {
+    id: 'step-4',
+    type: 'wait',
+    title: 'Wait Step',
+    description: 'This is a wait step',
+    effect({ next }) {
+      // do something and go next
+      // you can also return a cleanup
+    },
+  },
+]
+```
+
+### Configuring actions
+
+Every step supports a list of actions that are rendered in the step footer.Use
+the `actions` property to define each action.
+
+```tsx
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'dialog',
+    title: 'Dialog Step',
+    description: 'This is a dialog step',
+    actions: [{ label: 'Show me a tour!', action: 'next' }],
+  },
+]
+```
+
+### Changing tooltip placement
+
+Use the `placement` property to define the placement of the tooltip.
+
+```tsx {5}
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'tooltip',
+    placement: 'top-start',
+    // ...
+  },
+]
+```
+
+### Hiding the arrow
+
+Set `arrow: false` in the step property to hide the tooltip arrow. This is only
+useful for tooltip steps.
+
+```tsx {5}
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'tooltip',
+    arrow: false,
+  },
+]
+```
+
+### Hiding the backdrop
+
+Set `backdrop: false` in the step property to hide the backdrop. This applies to
+all step types except the `wait` step.
+
+```tsx {5}
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'dialog',
+    backdrop: false,
+  },
+]
+```
+
+### Step Effects
+
+Step effects are functions that are called before a step is opened. They are
+useful for adding custom logic to a step.
+
+This function provides the following methods:
+
+- `next()`: Call this method to move to the next step.
+- `show()`: Call this method to show the current step.
+- `update(details: StepDetails)`: Call this method to update the details of the
+  current step (say, after data has been fetched).
+
+```tsx
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'tooltip',
+    effect({ next, show, update }) {
+      fetchData().then((res) => {
+        // update the step details
+        update({ title: res.title })
+        // then show show the step
+        show()
+      })
+
+      return () => {
+        // cleanup fetch data
+      }
+    },
+  },
+]
+```
+
+### Wait Steps
+
+Wait steps are useful when you need to wait for a specific condition before
+proceeding to the next step.
+
+Use the step `effect` function to perform an action and then call `next()` to
+move to the next step.
+
+> **Note:** You cannot call `show()` in a wait step.
+
+```tsx
+const steps: TourStepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'wait',
+    effect({ next }) {
+      const button = document.querySelector('#button')
+      const listener = () => next()
+      button.addEventListener('click', listener)
+      return () => button.removeEventListener('click', listener)
+    },
+  },
+]
+```
+
+## API Reference
+
+<ComponentTypes id="tour" />
diff --git a/website/src/content/types/react/tour.types.json b/website/src/content/types/react/tour.types.json
new file mode 100644
index 0000000000..95f4b71c98
--- /dev/null
+++ b/website/src/content/types/react/tour.types.json
@@ -0,0 +1,145 @@
+{
+  "ActionTrigger": {
+    "props": {
+      "action": { "type": "StepAction", "isRequired": true },
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLButtonElement"
+  },
+  "Arrow": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "ArrowTip": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "Backdrop": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "CloseTrigger": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLButtonElement"
+  },
+  "Content": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "Description": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "Positioner": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "ProgressText": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "Root": {
+    "props": {
+      "tour": { "type": "UseTourReturn", "isRequired": true },
+      "immediate": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Whether to synchronize the present change immediately or defer it to the next frame"
+      },
+      "lazyMount": {
+        "type": "boolean",
+        "defaultValue": "false",
+        "isRequired": false,
+        "description": "Whether to enable lazy mounting"
+      },
+      "onExitComplete": {
+        "type": "() => void",
+        "isRequired": false,
+        "description": "Function called when the animation ends in the closed state"
+      },
+      "present": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Whether the node is present (controlled by the user)"
+      },
+      "unmountOnExit": {
+        "type": "boolean",
+        "defaultValue": "false",
+        "isRequired": false,
+        "description": "Whether to unmount on exit."
+      }
+    }
+  },
+  "Spotlight": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLDivElement"
+  },
+  "Title": {
+    "props": {
+      "asChild": {
+        "type": "boolean",
+        "isRequired": false,
+        "description": "Use the provided child element as the default rendered element, combining their props and behavior."
+      }
+    },
+    "element": "HTMLHeadingElement"
+  }
+}
diff --git a/website/src/demos/index.ts b/website/src/demos/index.ts
index 656138df18..135184b670 100644
--- a/website/src/demos/index.ts
+++ b/website/src/demos/index.ts
@@ -44,4 +44,5 @@ export { Demo as Toast } from './toast.demo'
 export { Demo as ToggleGroup } from './toggle-group.demo'
 export { Demo as Toggle } from './toggle.demo'
 export { Demo as Tooltip } from './tooltip.demo'
+export { Demo as Tour } from './tour.demo'
 export { Demo as TreeView } from './tree-view.demo'
diff --git a/website/src/demos/tour.demo.tsx b/website/src/demos/tour.demo.tsx
new file mode 100644
index 0000000000..bb8a169854
--- /dev/null
+++ b/website/src/demos/tour.demo.tsx
@@ -0,0 +1,84 @@
+'use client'
+import { Portal } from '@ark-ui/react/portal'
+import { XIcon } from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import { IconButton } from '~/components/ui/icon-button'
+import { Tour, useTour } from '~/components/ui/tour'
+
+export const Demo = () => {
+  const tour = useTour({ steps })
+
+  return (
+    <>
+      <Button onClick={() => tour.start()}>Start Tour</Button>
+      <Tour.Root tour={tour}>
+        <Portal>
+          <Tour.Backdrop />
+          <Tour.Spotlight />
+          <Tour.Positioner>
+            <Tour.Content>
+              <Tour.Arrow>
+                <Tour.ArrowTip />
+              </Tour.Arrow>
+              <Tour.Title />
+              <Tour.Description />
+              <Tour.ProgressText />
+              <Tour.CloseTrigger asChild>
+                <IconButton size="sm" variant="link">
+                  <XIcon />
+                </IconButton>
+              </Tour.CloseTrigger>
+              <Tour.Control>
+                <Tour.Actions>
+                  {(actions) =>
+                    actions.map((action) => (
+                      <Tour.ActionTrigger key={action.label} action={action} asChild>
+                        <Button variant="link" size="sm">
+                          {action.label}
+                        </Button>
+                      </Tour.ActionTrigger>
+                    ))
+                  }
+                </Tour.Actions>
+              </Tour.Control>
+            </Tour.Content>
+          </Tour.Positioner>
+        </Portal>
+      </Tour.Root>
+    </>
+  )
+}
+
+const steps: Tour.StepDetails[] = [
+  {
+    id: 'step-1',
+    type: 'dialog',
+    title: 'Step 1',
+    description: 'This is the first step',
+    actions: [{ label: 'Next', action: 'next' }],
+  },
+  {
+    id: 'step-2',
+    type: 'tooltip',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#framework-select'),
+    arrow: false,
+    backdrop: true,
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    id: 'step-3',
+    type: 'tooltip',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#version-select'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Done', action: 'dismiss' },
+    ],
+  },
+]
diff --git a/website/src/lib/search.ts b/website/src/lib/search.ts
index 165d2c7b4a..651352374d 100644
--- a/website/src/lib/search.ts
+++ b/website/src/lib/search.ts
@@ -1,5 +1,5 @@
-import { pages } from '.velite'
 import { fetchExamplesGroupedByCategory } from './examples'
+import { pages } from '.velite'
 
 const components = pages
   .filter((page) => page.category === 'components')
diff --git a/website/src/theme/recipes/field.ts b/website/src/theme/recipes/field.ts
new file mode 100644
index 0000000000..13dc391346
--- /dev/null
+++ b/website/src/theme/recipes/field.ts
@@ -0,0 +1,22 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const field = defineSlotRecipe({
+  className: 'field',
+  slots: ['helperText', 'label', 'root'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+    },
+    label: {
+      color: 'fg.default',
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    helperText: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+  },
+})
diff --git a/website/src/theme/recipes/tour.ts b/website/src/theme/recipes/tour.ts
new file mode 100644
index 0000000000..e8e8b6a28a
--- /dev/null
+++ b/website/src/theme/recipes/tour.ts
@@ -0,0 +1,88 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const tour = defineSlotRecipe({
+  className: 'tour',
+  slots: [
+    'actionTrigger',
+    'arrow',
+    'arrowTip',
+    'backdrop',
+    'closeTrigger',
+    'content',
+    'control',
+    'description',
+    'positioner',
+    'progressText',
+    'spotlight',
+    'title',
+  ],
+  base: {
+    backdrop: {
+      backdropFilter: 'blur(4px)',
+      background: {
+        _light: 'white.a10',
+        _dark: 'black.a10',
+      },
+      // height: '100%',
+      // left: '0',
+      // position: 'fixed',
+      // top: '0',
+      // width: '100vw',
+      zIndex: 'overlay',
+      _open: {
+        animation: 'backdrop-in',
+      },
+      _closed: {
+        animation: 'backdrop-out',
+      },
+    },
+    content: {
+      position: 'relative',
+      background: 'bg.default',
+      borderRadius: 'l3',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: 'sm',
+      p: '4',
+    },
+    positioner: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center',
+      zIndex: 'modal!',
+      "&[data-type='dialog']": {
+        inset: 0,
+        position: 'fixed',
+      },
+      '&[data-type="tooltip"]': {
+        position: 'absolute',
+      },
+    },
+    control: {
+      display: 'flex',
+      gap: '3',
+    },
+    arrow: {
+      '--arrow-size': 'var(--sizes-3)',
+      '--arrow-background': 'var(--colors-bg-default)',
+    },
+    arrowTip: {
+      borderTopWidth: '1px',
+      borderLeftWidth: '1px',
+    },
+    title: {
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '3',
+      right: '3',
+    },
+  },
+})