diff --git a/.claude/rules/docs.md b/.claude/rules/docs.md
index fbd2fb45d..5058e296c 100644
--- a/.claude/rules/docs.md
+++ b/.claude/rules/docs.md
@@ -88,7 +88,7 @@ Adapters let you swap the underlying implementation without changing your applic
 2. `<DocsPageFeatures :frontmatter />` — renders badges from frontmatter
 3. `<DocsBrowserSupport>` — optional, for native API features
 4. **Usage** — brief intro + code fence (not a live example)
-5. **Anatomy** — Vue template tree in `` ```vue playground collapse `` `` code fence
+5. **Anatomy** — Vue template tree in `` ```vue Anatomy playground `` `` code fence. **Show only component hierarchy** — no props, no slot bindings, no text content, no directives (`v-if`, `v-slot`, `@click`). Use self-closing tags (`<Tour.Title />` not `<Tour.Title>Title</Tour.Title>`)
 6. **Architecture** — optional Mermaid diagram
 7. **Examples** — `::: example` blocks, each with 2+ files
 8. **Recipes** — code fences or single-file `::: example` blocks
diff --git a/apps/docs/src/examples/components/tour/basic.vue b/apps/docs/src/examples/components/tour/basic.vue
new file mode 100644
index 000000000..c97e6cad3
--- /dev/null
+++ b/apps/docs/src/examples/components/tour/basic.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+  import { createTour, Tour } from '@vuetify/v0'
+  import { provide } from 'vue'
+
+  const tour = createTour()
+  provide('v0:tour', tour)
+
+  tour.steps.onboard([
+    { id: 'welcome', type: 'dialog' },
+    { id: 'search' },
+    { id: 'profile' },
+  ])
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center gap-4">
+      <Tour.Activator step="search">
+        <input
+          class="px-3 py-2 border border-divider rounded-lg bg-surface text-on-surface text-sm w-48"
+          placeholder="Search..."
+          type="text"
+        >
+      </Tour.Activator>
+
+      <Tour.Activator step="profile">
+        <div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium">
+          JL
+        </div>
+      </Tour.Activator>
+    </div>
+
+    <button
+      class="px-4 py-2 bg-primary text-on-primary rounded-lg text-sm font-medium w-fit"
+      @click="tour.start()"
+    >
+      Start Tour
+    </button>
+
+    <Tour.Highlight :padding="8" />
+
+    <!-- Step 1: Welcome -->
+    <Tour.Root step="welcome">
+      <Tour.Content>
+        <div class="bg-surface border border-divider rounded-xl p-6 max-w-sm shadow-lg pointer-events-auto">
+          <Tour.Title class="text-lg font-semibold text-on-surface">
+            Welcome!
+          </Tour.Title>
+
+          <Tour.Description class="text-sm text-on-surface-variant mt-1">
+            Let us show you around the interface.
+          </Tour.Description>
+
+          <div class="flex justify-end gap-2 mt-4">
+            <Tour.Skip
+              class="px-3 py-1.5 text-sm text-on-surface-variant"
+              @skip="tour.stop()"
+            >
+              Skip
+            </Tour.Skip>
+
+            <Tour.Next class="px-3 py-1.5 text-sm bg-primary text-on-primary rounded-md">
+              Next
+            </Tour.Next>
+          </div>
+        </div>
+      </Tour.Content>
+    </Tour.Root>
+
+    <!-- Step 2: Search -->
+    <Tour.Root step="search">
+      <Tour.Content>
+        <div class="bg-surface border border-divider rounded-xl p-4 max-w-xs shadow-lg">
+          <Tour.Title class="text-base font-semibold text-on-surface">
+            Search
+          </Tour.Title>
+
+          <Tour.Description class="text-sm text-on-surface-variant mt-1">
+            Find anything with the search bar.
+          </Tour.Description>
+
+          <div class="flex items-center justify-between mt-3">
+            <Tour.Progress class="text-xs text-on-surface-variant" />
+
+            <div class="flex gap-2">
+              <Tour.Prev class="px-3 py-1.5 text-sm border border-divider rounded-md disabled:opacity-40">
+                Back
+              </Tour.Prev>
+
+              <Tour.Next class="px-3 py-1.5 text-sm bg-primary text-on-primary rounded-md">
+                Next
+              </Tour.Next>
+            </div>
+          </div>
+        </div>
+      </Tour.Content>
+    </Tour.Root>
+
+    <!-- Step 3: Profile -->
+    <Tour.Root step="profile">
+      <Tour.Content>
+        <div class="bg-surface border border-divider rounded-xl p-4 max-w-xs shadow-lg">
+          <Tour.Title class="text-base font-semibold text-on-surface">
+            Your Profile
+          </Tour.Title>
+
+          <Tour.Description class="text-sm text-on-surface-variant mt-1">
+            Access settings and preferences here.
+          </Tour.Description>
+
+          <div class="flex items-center justify-between mt-3">
+            <Tour.Progress class="text-xs text-on-surface-variant" />
+
+            <div class="flex gap-2">
+              <Tour.Prev class="px-3 py-1.5 text-sm border border-divider rounded-md disabled:opacity-40">
+                Back
+              </Tour.Prev>
+
+              <button
+                class="px-3 py-1.5 text-sm bg-primary text-on-primary rounded-md"
+                @click="tour.complete()"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      </Tour.Content>
+    </Tour.Root>
+
+    <Tour.Keyboard />
+  </div>
+</template>
diff --git a/apps/docs/src/examples/composables/use-tour/basic.vue b/apps/docs/src/examples/composables/use-tour/basic.vue
new file mode 100644
index 000000000..e139c6d98
--- /dev/null
+++ b/apps/docs/src/examples/composables/use-tour/basic.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  import { createTour } from '@vuetify/v0'
+  import { provide } from 'vue'
+
+  const tour = createTour()
+  provide('v0:tour', tour)
+
+  tour.steps.onboard([
+    { id: 'step-1' },
+    { id: 'step-2' },
+    { id: 'step-3', type: 'wait' },
+  ])
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex gap-2 flex-wrap">
+      <button
+        class="px-3 py-1.5 text-sm bg-primary text-on-primary rounded-md"
+        @click="tour.start()"
+      >
+        Start
+      </button>
+
+      <button
+        class="px-3 py-1.5 text-sm border border-divider rounded-md"
+        :disabled="!tour.isActive.value"
+        @click="tour.prev()"
+      >
+        Prev
+      </button>
+
+      <button
+        class="px-3 py-1.5 text-sm border border-divider rounded-md"
+        :disabled="!tour.isActive.value"
+        @click="tour.next()"
+      >
+        Next
+      </button>
+
+      <button
+        class="px-3 py-1.5 text-sm border border-divider rounded-md"
+        :disabled="!tour.isActive.value"
+        @click="tour.stop()"
+      >
+        Stop
+      </button>
+
+      <button
+        v-if="!tour.isReady.value && tour.isActive.value"
+        class="px-3 py-1.5 text-sm bg-success text-on-success rounded-md"
+        @click="tour.ready()"
+      >
+        Mark Ready
+      </button>
+    </div>
+
+    <div class="text-sm space-y-1 text-on-surface-variant">
+      <div>Active: <span class="font-mono text-on-surface">{{ tour.isActive.value }}</span></div>
+      <div>Step: <span class="font-mono text-on-surface">{{ tour.selectedId.value ?? '—' }}</span></div>
+      <div>Ready: <span class="font-mono text-on-surface">{{ tour.isReady.value }}</span></div>
+      <div>Complete: <span class="font-mono text-on-surface">{{ tour.isComplete.value }}</span></div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/pages/components/disclosure/tour.md b/apps/docs/src/pages/components/disclosure/tour.md
new file mode 100644
index 000000000..f1e954ab0
--- /dev/null
+++ b/apps/docs/src/pages/components/disclosure/tour.md
@@ -0,0 +1,83 @@
+---
+title: Tour - Guided Tour Component for Vue 3
+meta:
+- name: description
+  content: Headless guided tour component for Vue 3 with step navigation, validation gates, keyboard support, and activator highlighting. Fully customizable and accessible.
+- name: keywords
+  content: tour, guided tour, onboarding, walkthrough, tooltip, Vue 3, headless, accessibility
+features:
+  category: Component
+  label: 'C: Tour'
+  github: /components/Tour/
+  renderless: false
+  level: 2
+related:
+  - /components/disclosure/dialog
+  - /components/disclosure/popover
+  - /composables/plugins/use-tour
+---
+
+# Tour
+
+A headless guided tour component for building onboarding flows, feature walkthroughs, and contextual help.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+The Tour component composes step navigation, activator tracking, and overlay management into a compound component pattern. Install the plugin, register steps, and wrap target elements with activators.
+
+::: example
+/components/tour/basic
+:::
+
+## Anatomy
+
+```vue Anatomy playground
+<script setup lang="ts">
+  import { Tour } from '@vuetify/v0'
+</script>
+
+<template>
+  <Tour.Highlight />
+
+  <Tour.Root>
+    <Tour.Content>
+      <Tour.Title />
+
+      <Tour.Description />
+
+      <Tour.Progress />
+
+      <Tour.Prev />
+
+      <Tour.Next />
+
+      <Tour.Skip />
+    </Tour.Content>
+  </Tour.Root>
+
+  <Tour.Activator />
+
+  <Tour.Keyboard />
+</template>
+```
+
+## Step Types
+
+| Type | Behavior |
+| - | - |
+| `tooltip` | Anchored to an activator element (default) |
+| `dialog` | Centered overlay, no activator needed |
+| `floating` | Positioned freely, no activator anchoring |
+| `wait` | Blocks navigation until `tour.ready()` is called |
+
+## Accessibility
+
+- Tour content uses `role="dialog"` with `aria-modal="true"`
+- Title and description linked via `aria-labelledby` and `aria-describedby`
+- Navigation buttons have descriptive `aria-label` attributes
+- Progress uses `role="status"` for screen reader announcements
+- Keyboard navigation via `TourKeyboard` (arrow keys + escape)
+
+<DocsApi />
diff --git a/apps/docs/src/pages/components/index.md b/apps/docs/src/pages/components/index.md
index 5503c83a5..df660768a 100644
--- a/apps/docs/src/pages/components/index.md
+++ b/apps/docs/src/pages/components/index.md
@@ -87,5 +87,6 @@ Components for showing/hiding content.
 | [ExpansionPanel](/components/disclosure/expansion-panel) | Accordion-style collapsible panels |
 | [Popover](/components/disclosure/popover) | CSS anchor-positioned popup content |
 | [Tabs](/components/disclosure/tabs) | Tab panel navigation with keyboard support and lazy content rendering |
+| [Tour](/components/disclosure/tour) | Guided tour with step navigation, validation gates, and keyboard support |
 | [Treeview](/components/disclosure/treeview) | Hierarchical tree with nested selection and expand/collapse |
 
diff --git a/apps/docs/src/pages/composables/index.md b/apps/docs/src/pages/composables/index.md
index 0a7d4279c..1bf6ba99e 100644
--- a/apps/docs/src/pages/composables/index.md
+++ b/apps/docs/src/pages/composables/index.md
@@ -185,6 +185,7 @@ Application-level features installable via Vue plugins.
 | [useRules](/composables/plugins/use-rules) | Validation rule aliases with locale-aware messages |
 | [useStorage](/composables/plugins/use-storage) | Reactive browser storage interface |
 | [useTheme](/composables/plugins/use-theme) | Theme management with CSS custom properties |
+| [useTour](/composables/plugins/use-tour) | Guided tour orchestration with step navigation and validation gates |
 
 ## Data
 
diff --git a/apps/docs/src/pages/composables/plugins/use-tour.md b/apps/docs/src/pages/composables/plugins/use-tour.md
new file mode 100644
index 000000000..ec66afb2e
--- /dev/null
+++ b/apps/docs/src/pages/composables/plugins/use-tour.md
@@ -0,0 +1,106 @@
+---
+title: useTour - Guided Tour Plugin for Vue 3
+meta:
+- name: description
+  content: Vue 3 composable for building guided tours and onboarding flows. Step navigation, validation gates, activator tracking, and z-index coordination.
+- name: keywords
+  content: useTour, tour, guided tour, onboarding, walkthrough, composable, Vue 3
+features:
+  category: Plugin
+  label: 'E: useTour'
+  github: /composables/useTour/
+  level: 2
+related:
+- /composables/selection/create-step
+- /composables/registration/create-registry
+- /composables/forms/create-form
+- /components/disclosure/tour
+---
+
+# useTour
+
+<DocsPageFeatures :frontmatter />
+
+Headless guided tour plugin composing createStep, createRegistry, and createForm for step orchestration, activator tracking, and validation gates.
+
+## Installation
+
+Install the Tour plugin in your app's entry point:
+
+```ts main.ts
+import { createApp } from 'vue'
+import { createTourPlugin } from '@vuetify/v0'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(createTourPlugin())
+
+app.mount('#app')
+```
+
+## Usage
+
+```ts collapse
+import { useTour } from '@vuetify/v0'
+
+const tour = useTour()
+
+// Register steps
+tour.steps.onboard([
+  { id: 'welcome', type: 'dialog' },
+  { id: 'search', type: 'tooltip' },
+  { id: 'profile', type: 'tooltip' },
+  { id: 'action', type: 'wait' },
+])
+
+// Start tour
+tour.start()
+
+// Navigate
+await tour.next()
+tour.prev()
+await tour.step(3)
+
+// Lifecycle
+tour.stop()      // Dismiss without completing
+tour.complete()  // Mark as finished
+tour.reset()     // Clear all state
+tour.ready()     // Unblock a 'wait' step
+```
+
+## Architecture
+
+```mermaid
+graph TD
+    A[createTour] --> B[createStep]
+    A --> C[createRegistry]
+    A --> D[createForm]
+    B --> E[Step navigation]
+    C --> F[Activator tracking]
+    D --> G[Validation gates]
+```
+
+## Reactivity
+
+| Property | Type | Description |
+| - | - | - |
+| `isActive` | `Readonly<ShallowRef<boolean>>` | Whether the tour is currently running |
+| `isComplete` | `Readonly<ShallowRef<boolean>>` | Whether the tour finished via `complete()` |
+| `isReady` | `Readonly<ShallowRef<boolean>>` | Whether the current step allows navigation |
+| `isFirst` | `Readonly<Ref<boolean>>` | Whether the current step is the first |
+| `isLast` | `Readonly<Ref<boolean>>` | Whether the current step is the last |
+| `canGoBack` | `Readonly<Ref<boolean>>` | Ready and not first |
+| `canGoNext` | `Readonly<Ref<boolean>>` | Ready and not last |
+| `selectedId` | `Ref<ID \| undefined>` | Current step ID |
+| `total` | `number` | Total registered steps |
+
+## Examples
+
+### Basic
+
+::: example
+/composables/use-tour/basic
+:::
+
+<DocsApi />
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 632046d0c..4646f20e9 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -104,6 +104,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/components/disclosure/tour': RouteRecordInfo<
+      '/components/disclosure/tour',
+      '/components/disclosure/tour',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/components/disclosure/treeview': RouteRecordInfo<
       '/components/disclosure/treeview',
       '/components/disclosure/treeview',
@@ -447,6 +454,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/composables/plugins/use-tour': RouteRecordInfo<
+      '/composables/plugins/use-tour',
+      '/composables/plugins/use-tour',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/composables/reactivity/use-proxy-model': RouteRecordInfo<
       '/composables/reactivity/use-proxy-model',
       '/composables/reactivity/use-proxy-model',
@@ -995,6 +1009,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/components/disclosure/tour.md': {
+      routes:
+        | '/components/disclosure/tour'
+      views:
+        | never
+    }
     'src/pages/components/disclosure/treeview.md': {
       routes:
         | '/components/disclosure/treeview'
@@ -1289,6 +1309,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/composables/plugins/use-tour.md': {
+      routes:
+        | '/composables/plugins/use-tour'
+      views:
+        | never
+    }
     'src/pages/composables/reactivity/use-proxy-model.md': {
       routes:
         | '/composables/reactivity/use-proxy-model'
diff --git a/packages/0/README.md b/packages/0/README.md
index 6189b5e11..3ed9e18fb 100644
--- a/packages/0/README.md
+++ b/packages/0/README.md
@@ -124,6 +124,7 @@ import { ... } from '@vuetify/v0/date'       // Date adapter and utilities
 | **ExpansionPanel** | Accordion-style collapsible panels |
 | **Popover** | CSS anchor-positioned popup content |
 | **Tabs** | Tab panel navigation with keyboard support and lazy content rendering |
+| **Tour** | Guided tour with step navigation, validation gates, and keyboard support |
 | **Treeview** | Hierarchical tree with nested selection and expand/collapse |
 
 #### Semantic
@@ -230,6 +231,7 @@ Plugin-capable composables following the trinity pattern:
 - **`useStack`** - Overlay z-index stacking with automatic scrim coordination
 - **`useStorage`** - Storage adapter (localStorage/sessionStorage/memory)
 - **`useTheme`** - Theme management with CSS variable injection
+- **`useTour`** - Guided tour orchestration with step navigation and validation gates
 
 ## Design Principles
 
diff --git a/packages/0/src/components/Tour/TourActivator.vue b/packages/0/src/components/Tour/TourActivator.vue
new file mode 100644
index 000000000..cfda9518c
--- /dev/null
+++ b/packages/0/src/components/Tour/TourActivator.vue
@@ -0,0 +1,108 @@
+/**
+ * @module TourActivator
+ *
+ * @remarks
+ * Registers a DOM element as the anchor target for a tour step.
+ * Handles scroll-into-view and CSS anchor-name for positioning.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+  import type { ID } from '#v0/types'
+
+  export interface TourActivatorProps extends AtomProps {
+    step: ID | ID[]
+    padding?: number
+    scroll?: boolean
+    scrollOptions?: ScrollIntoViewOptions
+    activeClass?: string
+    namespace?: string
+  }
+
+  export interface TourActivatorSlotProps {
+    isActive: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Composables
+  import { useTour } from '#v0/composables/useTour'
+
+  // Utilities
+  import { nextTick, onBeforeUnmount, onMounted, toRef, useTemplateRef, watch } from 'vue'
+
+  // Transformers
+  import { toArray } from '#v0/composables/toArray'
+  import { toElement } from '#v0/composables/toElement'
+
+  defineOptions({ name: 'TourActivator' })
+
+  defineSlots<{
+    default: (props: TourActivatorSlotProps) => any
+  }>()
+
+  const {
+    as = 'span',
+    step,
+    padding,
+    scroll = true,
+    scrollOptions = { block: 'end', behavior: 'instant' },
+    activeClass,
+    namespace = 'v0:tour',
+  } = defineProps<TourActivatorProps>()
+
+  const tour = useTour(namespace)
+  const activatorRef = useTemplateRef<HTMLElement>('activator')
+
+  const steps = toArray(step)
+  let tickets: ReturnType<typeof tour.activators.register>[] = []
+
+  onMounted(() => {
+    tickets = steps.map(id => tour.activators.register({ id, element: activatorRef, padding }))
+  })
+
+  onBeforeUnmount(() => {
+    for (const ticket of tickets) {
+      tour.activators.unregister(ticket.id)
+    }
+  })
+
+  async function scrollIntoViewIfActive () {
+    if (!scroll) return
+    if (!steps.includes(tour.selectedId.value as ID)) return
+    await nextTick()
+    toElement(activatorRef)?.scrollIntoView(scrollOptions)
+  }
+
+  onMounted(scrollIntoViewIfActive)
+  watch(() => tour.selectedId.value, scrollIntoViewIfActive)
+
+  const style = toRef(() => ({
+    anchorName: steps.map(id => `--tour-${id}`).join(', '),
+    scrollMarginBottom: '100px',
+  }))
+
+  const isActive = toRef(() => steps.includes(tour.selectedId.value as ID))
+
+  const slotProps = toRef((): TourActivatorSlotProps => ({
+    isActive: isActive.value,
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="activator"
+    :as
+    :class="isActive && activeClass"
+    data-part="activator"
+    data-scope="tour"
+    :data-state="isActive ? 'active' : undefined"
+    :style
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourContent.vue b/packages/0/src/components/Tour/TourContent.vue
new file mode 100644
index 000000000..7e46e9881
--- /dev/null
+++ b/packages/0/src/components/Tour/TourContent.vue
@@ -0,0 +1,155 @@
+/**
+ * @module TourContent
+ *
+ * @remarks
+ * Tour content container. Teleported to body for overlay positioning.
+ * Self-gates via root context isActive. Handles CSS anchor positioning
+ * for tooltip steps and centering for dialog/floating steps.
+ * Safari fallback centers content at the viewport edge.
+ */
+
+<script lang="ts">
+  // Types
+  export interface TourContentProps {
+    /** Placement relative to the activator. @default 'bottom' */
+    placement?: 'top' | 'bottom' | 'left' | 'right'
+    /** Offset from viewport edges in px. @default 16 */
+    offset?: number
+    namespace?: string
+  }
+
+  export interface TourContentSlotProps {}
+</script>
+
+<script setup lang="ts">
+  // Constants
+  import { IN_BROWSER } from '#v0/constants/globals'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  // Composables
+  import { useTour } from '#v0/composables/useTour'
+
+  // Utilities
+  import { nextTick, toRef, useAttrs, useTemplateRef, watch } from 'vue'
+
+  defineOptions({ name: 'TourContent', inheritAttrs: false })
+
+  defineSlots<{
+    default: (props: TourContentSlotProps) => any
+  }>()
+
+  const {
+    placement = 'bottom',
+    offset = 16,
+    namespace = 'v0:tour',
+  } = defineProps<TourContentProps>()
+
+  const attrs = useAttrs()
+  const root = useTourRootContext(namespace)
+  const tour = useTour(namespace)
+  const contentRef = useTemplateRef<HTMLElement>('content')
+
+  const supportsAnchor = IN_BROWSER
+    && typeof CSS !== 'undefined'
+    && typeof CSS.supports === 'function'
+    && CSS.supports('position-area', 'top')
+
+  const placementStyles: Record<string, Record<string, string>> = {
+    bottom: { positionArea: 'bottom', justifySelf: 'anchor-center' },
+    top: { positionArea: 'top', justifySelf: 'anchor-center' },
+    left: { positionArea: 'left', alignSelf: 'anchor-center' },
+    right: { positionArea: 'right', alignSelf: 'anchor-center' },
+  }
+
+  const fallbackStyles: Record<string, Record<string, string>> = {
+    bottom: { bottom: '16px', left: '50%', transform: 'translateX(-50%)' },
+    top: { top: '16px', left: '50%', transform: 'translateX(-50%)' },
+    left: { top: '50%', left: '16px', transform: 'translateY(-50%)' },
+    right: { top: '50%', right: '16px', transform: 'translateY(-50%)' },
+    center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
+  }
+
+  const step = toRef(() => tour.steps.get(root.step))
+  const isDialog = toRef(() => {
+    const type = step.value?.type
+    return type === 'dialog' || type === 'floating'
+  })
+
+  const activePlacement = toRef(() => {
+    if (isDialog.value) return 'center'
+    return step.value?.placement ?? placement
+  })
+
+  const style = toRef(() => {
+    const p = activePlacement.value
+
+    if (isDialog.value) {
+      return {
+        position: 'fixed' as const,
+        inset: '0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'none' as const,
+        zIndex: 9999,
+      }
+    }
+
+    if (supportsAnchor) {
+      return {
+        position: 'fixed' as const,
+        inset: `${offset}px`,
+        width: 'max-content',
+        height: 'max-content',
+        maxHeight: `calc(100vh - ${offset * 2}px)`,
+        positionAnchor: `--tour-${root.step}`,
+        zIndex: 9999,
+        ...placementStyles[p] ?? placementStyles.bottom,
+      }
+    }
+
+    return {
+      position: 'fixed' as const,
+      inset: 'auto',
+      zIndex: 9999,
+      ...fallbackStyles[p] ?? fallbackStyles.bottom,
+    }
+  })
+
+  // Auto-focus on mount (skip if input is focused)
+  watch(root.isActive, active => {
+    if (!active || !IN_BROWSER) return
+    nextTick(() => {
+      const focused = document.activeElement
+      const isInputFocused = focused?.tagName === 'INPUT'
+        || focused?.tagName === 'TEXTAREA'
+        || focused?.getAttribute('contenteditable') === 'true'
+      if (!isInputFocused) {
+        contentRef.value?.focus()
+      }
+    })
+  })
+</script>
+
+<template>
+  <Teleport v-if="root.isActive.value" to="body">
+    <div
+      ref="content"
+      v-bind="attrs"
+      :aria-describedby="root.descriptionId"
+      :aria-labelledby="root.titleId"
+      data-part="content"
+      :data-placement="activePlacement"
+      data-scope="tour"
+      :data-step="String(root.step)"
+      :data-type="isDialog ? 'dialog' : 'tooltip'"
+      role="dialog"
+      :style
+      tabindex="-1"
+    >
+      <slot />
+    </div>
+  </Teleport>
+</template>
diff --git a/packages/0/src/components/Tour/TourDescription.vue b/packages/0/src/components/Tour/TourDescription.vue
new file mode 100644
index 000000000..b3b9de023
--- /dev/null
+++ b/packages/0/src/components/Tour/TourDescription.vue
@@ -0,0 +1,47 @@
+/**
+ * @module TourDescription
+ *
+ * @remarks
+ * Semantic paragraph for tour step description.
+ * Sets id for aria-describedby reference from TourContent.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourDescriptionProps extends AtomProps {
+    namespace?: string
+  }
+
+  export interface TourDescriptionSlotProps {}
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  defineOptions({ name: 'TourDescription' })
+
+  defineSlots<{
+    default: (props: TourDescriptionSlotProps) => any
+  }>()
+
+  const { as = 'p', namespace = 'v0:tour' } = defineProps<TourDescriptionProps>()
+
+  const root = useTourRootContext(namespace)
+</script>
+
+<template>
+  <Atom
+    :id="root.descriptionId"
+    :as
+    data-part="description"
+    data-scope="tour"
+  >
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourHighlight.vue b/packages/0/src/components/Tour/TourHighlight.vue
new file mode 100644
index 000000000..8f8655d3e
--- /dev/null
+++ b/packages/0/src/components/Tour/TourHighlight.vue
@@ -0,0 +1,218 @@
+/**
+ * @module TourHighlight
+ *
+ * @remarks
+ * SVG overlay with cutout that highlights the active step's activator.
+ * Tracks activator bounding rect via rAF loop. Teleports to body.
+ * Renders full scrim for dialog/floating steps without activators.
+ */
+
+<script lang="ts">
+  // Types
+  export interface TourHighlightProps {
+    namespace?: string
+    /** Backdrop opacity (0-1). @default 0.5 */
+    opacity?: number
+    /** Padding around the highlighted element. @default 0 */
+    padding?: number
+    /** Whether clicking the backdrop dismisses the tour. @default false */
+    dismissible?: boolean
+  }
+
+  export interface TourHighlightSlotProps {
+    rect: { x: number, y: number, width: number, height: number } | null
+    radius: number
+    isVisible: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Constants
+  import { IN_BROWSER } from '#v0/constants/globals'
+
+  // Composables
+  import { useTour } from '#v0/composables/useTour'
+
+  // Utilities
+  import { useId } from '#v0/utilities'
+  import { onBeforeUnmount, shallowRef, toRef, watch } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  defineOptions({ name: 'TourHighlight' })
+
+  defineSlots<{
+    default: (props: TourHighlightSlotProps) => any
+  }>()
+
+  const {
+    namespace = 'v0:tour',
+    opacity = 0.5,
+    padding = 0,
+    dismissible = false,
+  } = defineProps<TourHighlightProps>()
+
+  const tour = useTour(namespace)
+  const maskId = `tour-highlight-${useId()}`
+
+  const rect = shallowRef<{ x: number, y: number, width: number, height: number } | null>(null)
+  const borderRadius = shallowRef(0)
+
+  function updateRect () {
+    const id = tour.selectedId.value
+    if (!id || !tour.isActive.value) {
+      if (rect.value !== null) rect.value = null
+      return
+    }
+
+    const step = tour.steps.get(id)
+    if (step?.type === 'dialog' || step?.type === 'floating') {
+      if (rect.value !== null) rect.value = null
+      return
+    }
+
+    const activator = tour.activators.get(id)
+    const el = toElement(activator?.element)
+    const r = el?.getBoundingClientRect()
+    if (!r) return
+
+    const p = activator?.padding ?? padding
+
+    const newRect = {
+      x: r.x - p,
+      y: r.y - p,
+      width: r.width + p * 2,
+      height: r.height + p * 2,
+    }
+
+    if (
+      !rect.value
+      || rect.value.x !== newRect.x
+      || rect.value.y !== newRect.y
+      || rect.value.width !== newRect.width
+      || rect.value.height !== newRect.height
+    ) {
+      rect.value = newRect
+    }
+
+    if (el) {
+      const styles = getComputedStyle(el)
+      const newRadius = Number.parseFloat(styles.borderRadius) || 0
+      if (borderRadius.value !== newRadius) {
+        borderRadius.value = newRadius
+      }
+    }
+  }
+
+  // Continuous RAF loop
+  let rafId: number | null = null
+
+  function startLoop () {
+    if (rafId !== null || !IN_BROWSER) return
+    function loop () {
+      updateRect()
+      rafId = requestAnimationFrame(loop)
+    }
+    rafId = requestAnimationFrame(loop)
+  }
+
+  function stopLoop () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+    rect.value = null
+  }
+
+  watch(
+    () => tour.isActive.value,
+    active => {
+      if (active) startLoop()
+      else stopLoop()
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(stopLoop)
+
+  const isVisible = toRef(() => tour.isActive.value)
+  const showCutout = toRef(() => rect.value !== null)
+
+  function onBackdropClick () {
+    if (dismissible) tour.stop()
+  }
+
+  const slotProps = toRef((): TourHighlightSlotProps => ({
+    rect: rect.value,
+    radius: borderRadius.value,
+    isVisible: isVisible.value,
+  }))
+</script>
+
+<template>
+  <slot v-bind="slotProps" />
+
+  <Teleport to="body">
+    <div v-if="isVisible" class="fixed inset-0 pointer-events-none" style="z-index: 9998">
+      <!-- Click layer for backdrop dismissal -->
+      <div
+        v-if="dismissible"
+        aria-hidden="true"
+        class="absolute inset-0 pointer-events-auto"
+        @click="onBackdropClick"
+      />
+
+      <!-- SVG Backdrop -->
+      <svg
+        aria-hidden="true"
+        class="absolute inset-0 pointer-events-none w-screen h-screen"
+      >
+        <template v-if="showCutout && rect">
+          <defs>
+            <mask :id="maskId">
+              <rect fill="white" height="100%" width="100%" />
+              <rect
+                fill="black"
+                :height="rect.height"
+                :rx="borderRadius"
+                :ry="borderRadius"
+                :width="rect.width"
+                :x="rect.x"
+                :y="rect.y"
+              />
+            </mask>
+          </defs>
+
+          <rect
+            :fill="`rgba(0, 0, 0, ${opacity})`"
+            height="100%"
+            :mask="`url(#${maskId})`"
+            width="100%"
+          />
+
+          <rect
+            class="fill-none"
+            :height="rect.height"
+            :rx="borderRadius"
+            :ry="borderRadius"
+            stroke="currentColor"
+            stroke-opacity="0.3"
+            stroke-width="2"
+            :width="rect.width"
+            :x="rect.x"
+            :y="rect.y"
+          />
+        </template>
+
+        <!-- Full scrim for dialog/floating steps -->
+        <rect
+          v-else
+          :fill="`rgba(0, 0, 0, ${opacity})`"
+          height="100%"
+          width="100%"
+        />
+      </svg>
+    </div>
+  </Teleport>
+</template>
diff --git a/packages/0/src/components/Tour/TourKeyboard.vue b/packages/0/src/components/Tour/TourKeyboard.vue
new file mode 100644
index 000000000..245190cdc
--- /dev/null
+++ b/packages/0/src/components/Tour/TourKeyboard.vue
@@ -0,0 +1,50 @@
+/**
+ * @module TourKeyboard
+ *
+ * @remarks
+ * Renderless keyboard navigation for tours.
+ * Wires useHotkey for prev/next/stop actions.
+ * Opt-in — not included means no keyboard handling.
+ */
+
+<script lang="ts">
+  export interface TourKeyboardProps {
+    prev?: string
+    next?: string
+    stop?: string
+    namespace?: string
+  }
+</script>
+
+<script setup lang="ts">
+  // Composables
+  import { useHotkey } from '#v0/composables/useHotkey'
+  import { useTour } from '#v0/composables/useTour'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'TourKeyboard' })
+
+  const {
+    prev = 'arrowleft',
+    next = 'arrowright',
+    stop = 'escape',
+    namespace = 'v0:tour',
+  } = defineProps<TourKeyboardProps>()
+
+  const tour = useTour(namespace)
+
+  // Only active when tour is active
+  const keys = toRef(() => tour.isActive.value ? prev : undefined)
+  const nextKeys = toRef(() => tour.isActive.value ? next : undefined)
+  const stopKeys = toRef(() => tour.isActive.value ? stop : undefined)
+
+  useHotkey(keys, () => tour.prev(), { inputs: false })
+  useHotkey(nextKeys, () => tour.next(), { inputs: false })
+  useHotkey(stopKeys, () => tour.stop(), { inputs: true })
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/0/src/components/Tour/TourNext.vue b/packages/0/src/components/Tour/TourNext.vue
new file mode 100644
index 000000000..84bdd582d
--- /dev/null
+++ b/packages/0/src/components/Tour/TourNext.vue
@@ -0,0 +1,73 @@
+/**
+ * @module TourNext
+ *
+ * @remarks
+ * Next step / complete tour button with dynamic ARIA label.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourNextProps extends AtomProps {
+    disabled?: boolean
+    namespace?: string
+  }
+
+  export interface TourNextSlotProps {
+    isDisabled: boolean
+    isLast: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'TourNext' })
+
+  defineSlots<{
+    default: (props: TourNextSlotProps) => any
+  }>()
+
+  const {
+    as = 'button',
+    disabled,
+    namespace = 'v0:tour',
+  } = defineProps<TourNextProps>()
+
+  const root = useTourRootContext(namespace)
+
+  const isDisabled = toRef(() => disabled ?? false)
+  const label = toRef(() => root.isLast.value ? 'Complete tour' : 'Go to next step')
+
+  function next () {
+    if (isDisabled.value) return
+    root.next()
+  }
+
+  const slotProps = toRef((): TourNextSlotProps => ({
+    isDisabled: isDisabled.value,
+    isLast: root.isLast.value,
+  }))
+</script>
+
+<template>
+  <Atom
+    :aria-label="label"
+    :as
+    data-part="next"
+    data-scope="tour"
+    :disabled="isDisabled"
+    type="button"
+    @click="next"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourPrev.vue b/packages/0/src/components/Tour/TourPrev.vue
new file mode 100644
index 000000000..332622d6f
--- /dev/null
+++ b/packages/0/src/components/Tour/TourPrev.vue
@@ -0,0 +1,70 @@
+/**
+ * @module TourPrev
+ *
+ * @remarks
+ * Previous step navigation button with ARIA label and disabled state.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourPrevProps extends AtomProps {
+    disabled?: boolean
+    namespace?: string
+  }
+
+  export interface TourPrevSlotProps {
+    isDisabled: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'TourPrev' })
+
+  defineSlots<{
+    default: (props: TourPrevSlotProps) => any
+  }>()
+
+  const {
+    as = 'button',
+    disabled,
+    namespace = 'v0:tour',
+  } = defineProps<TourPrevProps>()
+
+  const root = useTourRootContext(namespace)
+
+  const isDisabled = toRef(() => disabled || root.isFirst.value)
+
+  function prev () {
+    if (isDisabled.value) return
+    root.prev()
+  }
+
+  const slotProps = toRef((): TourPrevSlotProps => ({
+    isDisabled: isDisabled.value,
+  }))
+</script>
+
+<template>
+  <Atom
+    aria-label="Go to previous step"
+    :as
+    data-part="prev"
+    data-scope="tour"
+    :disabled="isDisabled"
+    type="button"
+    @click="prev"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourProgress.vue b/packages/0/src/components/Tour/TourProgress.vue
new file mode 100644
index 000000000..40517b576
--- /dev/null
+++ b/packages/0/src/components/Tour/TourProgress.vue
@@ -0,0 +1,69 @@
+/**
+ * @module TourProgress
+ *
+ * @remarks
+ * Step counter with ARIA status role.
+ * Exposes current, total, text, and percent via slot props.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourProgressProps extends AtomProps {
+    namespace?: string
+  }
+
+  export interface TourProgressSlotProps {
+    current: number
+    total: number
+    text: string
+    percent: number
+  }
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'TourProgress' })
+
+  defineSlots<{
+    default: (props: TourProgressSlotProps) => any
+  }>()
+
+  const { as = 'span', namespace = 'v0:tour' } = defineProps<TourProgressProps>()
+
+  const root = useTourRootContext(namespace)
+
+  const current = toRef(() => root.index.value + 1)
+  const percent = toRef(() => root.total.value > 0 ? Math.round((current.value / root.total.value) * 100) : 0)
+  const text = toRef(() => `${current.value} of ${root.total.value}`)
+
+  const slotProps = toRef((): TourProgressSlotProps => ({
+    current: current.value,
+    total: root.total.value,
+    text: text.value,
+    percent: percent.value,
+  }))
+</script>
+
+<template>
+  <Atom
+    :aria-label="`Step ${current} of ${root.total.value}`"
+    :as
+    data-part="progress"
+    data-scope="tour"
+    role="status"
+  >
+    <slot v-bind="slotProps">
+      {{ text }}
+    </slot>
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourRoot.vue b/packages/0/src/components/Tour/TourRoot.vue
new file mode 100644
index 000000000..bb6603265
--- /dev/null
+++ b/packages/0/src/components/Tour/TourRoot.vue
@@ -0,0 +1,109 @@
+/**
+ * @module TourRoot
+ *
+ * @remarks
+ * Per-step context provider for the Tour compound component.
+ * Gates children by active step and provides step-scoped context.
+ */
+
+<script lang="ts">
+  // Composables
+  import { createContext } from '#v0/composables/createContext'
+
+  // Types
+  import type { TourContext } from '#v0/composables/useTour'
+  import type { ID } from '#v0/types'
+  import type { Ref } from 'vue'
+
+  export interface TourRootContext {
+    step: ID
+    isActive: Readonly<Ref<boolean>>
+    index: Readonly<Ref<number>>
+    total: Ref<number>
+    isFirst: Readonly<Ref<boolean>>
+    isLast: Readonly<Ref<boolean>>
+    canGoBack: TourContext['canGoBack']
+    canGoNext: TourContext['canGoNext']
+    titleId: string
+    descriptionId: string
+    next: () => void
+    prev: () => void
+    stop: () => void
+  }
+
+  export interface TourRootProps {
+    step: ID
+    namespace?: string
+  }
+
+  export interface TourRootSlotProps {
+    isActive: boolean
+    index: number
+    total: number
+    isFirst: boolean
+    isLast: boolean
+    canGoBack: boolean
+    canGoNext: boolean
+  }
+
+  export const [useTourRootContext, provideTourRootContext] = createContext<TourRootContext>({ suffix: 'root' })
+</script>
+
+<script setup lang="ts">
+  // Composables
+  import { useTour } from '#v0/composables/useTour'
+
+  // Utilities
+  import { useId } from '#v0/utilities'
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'TourRoot' })
+
+  defineSlots<{
+    default: (props: TourRootSlotProps) => any
+  }>()
+
+  const {
+    step,
+    namespace = 'v0:tour',
+  } = defineProps<TourRootProps>()
+
+  const tour = useTour(namespace)
+
+  const id = useId()
+  const titleId = `${id}-title`
+  const descriptionId = `${id}-description`
+
+  const isActive = toRef(() => tour.isActive.value && tour.selectedId.value === step)
+  const total = toRef(() => tour.total)
+  const index = toRef(() => tour.steps.selectedIndex.value)
+
+  provideTourRootContext(namespace, {
+    step,
+    isActive,
+    index,
+    total,
+    isFirst: tour.isFirst,
+    isLast: tour.isLast,
+    canGoBack: tour.canGoBack,
+    canGoNext: tour.canGoNext,
+    titleId,
+    descriptionId,
+    next: () => tour.next(),
+    prev: () => tour.prev(),
+    stop: () => tour.stop(),
+  })
+
+</script>
+
+<template>
+  <slot
+    :can-go-back="tour.canGoBack.value"
+    :can-go-next="tour.canGoNext.value"
+    :index
+    :is-active
+    :is-first="tour.isFirst.value"
+    :is-last="tour.isLast.value"
+    :total
+  />
+</template>
diff --git a/packages/0/src/components/Tour/TourSkip.vue b/packages/0/src/components/Tour/TourSkip.vue
new file mode 100644
index 000000000..4000cd07d
--- /dev/null
+++ b/packages/0/src/components/Tour/TourSkip.vue
@@ -0,0 +1,53 @@
+/**
+ * @module TourSkip
+ *
+ * @remarks
+ * Dismiss/skip tour button. Emits 'skip' event for consumer routing logic.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourSkipProps extends AtomProps {
+    namespace?: string
+  }
+
+  export interface TourSkipEmits {
+    skip: []
+  }
+
+  export interface TourSkipSlotProps {}
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  defineOptions({ name: 'TourSkip' })
+
+  defineSlots<{
+    default: (props: TourSkipSlotProps) => any
+  }>()
+
+  const { as = 'button' } = defineProps<TourSkipProps>()
+
+  const emit = defineEmits<TourSkipEmits>()
+
+  function skip () {
+    emit('skip')
+  }
+</script>
+
+<template>
+  <Atom
+    aria-label="Dismiss tour"
+    :as
+    data-part="skip"
+    data-scope="tour"
+    type="button"
+    @click="skip"
+  >
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/TourTitle.vue b/packages/0/src/components/Tour/TourTitle.vue
new file mode 100644
index 000000000..5710da2aa
--- /dev/null
+++ b/packages/0/src/components/Tour/TourTitle.vue
@@ -0,0 +1,47 @@
+/**
+ * @module TourTitle
+ *
+ * @remarks
+ * Semantic heading for tour step content.
+ * Sets id for aria-labelledby reference from TourContent.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface TourTitleProps extends AtomProps {
+    namespace?: string
+  }
+
+  export interface TourTitleSlotProps {}
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Context
+  import { useTourRootContext } from './TourRoot.vue'
+
+  defineOptions({ name: 'TourTitle' })
+
+  defineSlots<{
+    default: (props: TourTitleSlotProps) => any
+  }>()
+
+  const { as = 'h2', namespace = 'v0:tour' } = defineProps<TourTitleProps>()
+
+  const root = useTourRootContext(namespace)
+</script>
+
+<template>
+  <Atom
+    :id="root.titleId"
+    :as
+    data-part="title"
+    data-scope="tour"
+  >
+    <slot />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Tour/index.test.ts b/packages/0/src/components/Tour/index.test.ts
new file mode 100644
index 000000000..f86f4e15a
--- /dev/null
+++ b/packages/0/src/components/Tour/index.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, it } from 'vitest'
+
+// Composables
+import { createStackPlugin } from '#v0/composables/useStack'
+import { createTourPlugin, useTour } from '#v0/composables/useTour'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick } from 'vue'
+
+import { Tour } from '.'
+
+function createApp (template: string, setup?: () => Record<string, unknown>) {
+  return defineComponent({
+    components: {
+      TourRoot: Tour.Root,
+      TourTitle: Tour.Title,
+      TourDescription: Tour.Description,
+      TourProgress: Tour.Progress,
+      TourPrev: Tour.Prev,
+      TourNext: Tour.Next,
+      TourSkip: Tour.Skip,
+    },
+    template,
+    setup,
+  })
+}
+
+function mountWithPlugin (component: ReturnType<typeof createApp>) {
+  return mount(component, {
+    global: {
+      plugins: [createTourPlugin(), createStackPlugin()],
+    },
+  })
+}
+
+describe('tour components', () => {
+  describe('tour.Root', () => {
+    it('should expose isActive slot prop', () => {
+      const App = createApp(
+        `<TourRoot step="step-1" v-slot="{ isActive }">
+          <span data-testid="active">{{ isActive }}</span>
+        </TourRoot>`,
+      )
+
+      const wrapper = mountWithPlugin(App)
+      expect(wrapper.find('[data-testid="active"]').text()).toBe('false')
+    })
+  })
+
+  describe('tour.Title', () => {
+    it('should render h2 with id', () => {
+      const App = createApp(
+        `<TourRoot step="step-1">
+          <TourTitle>My Title</TourTitle>
+        </TourRoot>`,
+      )
+
+      const wrapper = mountWithPlugin(App)
+      const h2 = wrapper.find('h2')
+      expect(h2.exists()).toBe(true)
+      expect(h2.text()).toBe('My Title')
+      expect(h2.attributes('id')).toBeTruthy()
+      expect(h2.attributes('data-scope')).toBe('tour')
+      expect(h2.attributes('data-part')).toBe('title')
+    })
+  })
+
+  describe('tour.Description', () => {
+    it('should render p with id', () => {
+      const App = createApp(
+        `<TourRoot step="step-1">
+          <TourDescription>My Description</TourDescription>
+        </TourRoot>`,
+      )
+
+      const wrapper = mountWithPlugin(App)
+      const p = wrapper.find('p')
+      expect(p.exists()).toBe(true)
+      expect(p.text()).toBe('My Description')
+      expect(p.attributes('data-scope')).toBe('tour')
+    })
+  })
+
+  describe('tour.Progress', () => {
+    it('should render step counter with role status', () => {
+      const App = createApp(
+        `<TourRoot step="step-1">
+          <TourProgress />
+        </TourRoot>`,
+      )
+
+      const wrapper = mountWithPlugin(App)
+      const span = wrapper.find('[role="status"]')
+      expect(span.exists()).toBe(true)
+      expect(span.attributes('data-part')).toBe('progress')
+    })
+  })
+
+  describe('navigation', () => {
+    it('should show second step content after next()', async () => {
+      const App = createApp(
+        `<div>
+          <TourRoot step="step-1" v-slot="{ isActive }">
+            <span v-if="isActive" data-testid="step-1">Step 1</span>
+          </TourRoot>
+          <TourRoot step="step-2" v-slot="{ isActive }">
+            <span v-if="isActive" data-testid="step-2">Step 2</span>
+          </TourRoot>
+        </div>`,
+        () => {
+          const tour = useTour()
+          tour.steps.onboard([
+            { id: 'step-1' },
+            { id: 'step-2' },
+          ])
+          tour.start()
+          return { tour }
+        },
+      )
+
+      const wrapper = mountWithPlugin(App)
+      expect(wrapper.find('[data-testid="step-1"]').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="step-2"]').exists()).toBe(false)
+
+      const tour = (wrapper.vm as any).tour
+      await tour.next()
+      await nextTick()
+
+      expect(wrapper.find('[data-testid="step-1"]').exists()).toBe(false)
+      expect(wrapper.find('[data-testid="step-2"]').exists()).toBe(true)
+    })
+  })
+
+  describe('tour.Skip', () => {
+    it('should emit skip event on click', async () => {
+      const App = createApp(
+        `<TourRoot step="step-1">
+          <TourSkip @skip="onSkip">Skip</TourSkip>
+        </TourRoot>`,
+        () => {
+          const skipped = { value: false }
+          return {
+            onSkip: () => {
+              skipped.value = true
+            },
+            skipped,
+          }
+        },
+      )
+
+      const wrapper = mountWithPlugin(App)
+      const btn = wrapper.find('[data-part="skip"]')
+      expect(btn.exists()).toBe(true)
+      await btn.trigger('click')
+    })
+  })
+})
diff --git a/packages/0/src/components/Tour/index.ts b/packages/0/src/components/Tour/index.ts
new file mode 100644
index 000000000..7641a0637
--- /dev/null
+++ b/packages/0/src/components/Tour/index.ts
@@ -0,0 +1,76 @@
+export { default as TourRoot } from './TourRoot.vue'
+export { provideTourRootContext, useTourRootContext } from './TourRoot.vue'
+export type { TourRootContext, TourRootProps, TourRootSlotProps } from './TourRoot.vue'
+
+export { default as TourActivator } from './TourActivator.vue'
+export type { TourActivatorProps, TourActivatorSlotProps } from './TourActivator.vue'
+
+export { default as TourContent } from './TourContent.vue'
+export type { TourContentProps, TourContentSlotProps } from './TourContent.vue'
+
+export { default as TourHighlight } from './TourHighlight.vue'
+export type { TourHighlightProps, TourHighlightSlotProps } from './TourHighlight.vue'
+
+export { default as TourKeyboard } from './TourKeyboard.vue'
+export type { TourKeyboardProps } from './TourKeyboard.vue'
+
+export { default as TourTitle } from './TourTitle.vue'
+export type { TourTitleProps, TourTitleSlotProps } from './TourTitle.vue'
+
+export { default as TourDescription } from './TourDescription.vue'
+export type { TourDescriptionProps, TourDescriptionSlotProps } from './TourDescription.vue'
+
+export { default as TourProgress } from './TourProgress.vue'
+export type { TourProgressProps, TourProgressSlotProps } from './TourProgress.vue'
+
+export { default as TourPrev } from './TourPrev.vue'
+export type { TourPrevProps, TourPrevSlotProps } from './TourPrev.vue'
+
+export { default as TourNext } from './TourNext.vue'
+export type { TourNextProps, TourNextSlotProps } from './TourNext.vue'
+
+export { default as TourSkip } from './TourSkip.vue'
+export type { TourSkipEmits, TourSkipProps, TourSkipSlotProps } from './TourSkip.vue'
+
+// Components
+import Activator from './TourActivator.vue'
+import Content from './TourContent.vue'
+import Description from './TourDescription.vue'
+import Highlight from './TourHighlight.vue'
+import Keyboard from './TourKeyboard.vue'
+import Next from './TourNext.vue'
+import Prev from './TourPrev.vue'
+import Progress from './TourProgress.vue'
+import Root from './TourRoot.vue'
+import Skip from './TourSkip.vue'
+import Title from './TourTitle.vue'
+
+/**
+ * Tour component with sub-components for building guided tours.
+ *
+ * @see https://0.vuetifyjs.com/components/disclosure/tour
+ */
+export const Tour = {
+  /** Per-step context provider. @see https://0.vuetifyjs.com/components/disclosure/tour */
+  Root,
+  /** Element registration and CSS anchor positioning. */
+  Activator,
+  /** Tour content container, teleported to body. */
+  Content,
+  /** SVG overlay with cutout highlighting the active activator. */
+  Highlight,
+  /** Renderless keyboard navigation (arrow keys + escape). */
+  Keyboard,
+  /** Semantic heading with aria-labelledby integration. */
+  Title,
+  /** Semantic paragraph with aria-describedby integration. */
+  Description,
+  /** Step counter with role="status". */
+  Progress,
+  /** Previous step button with disabled state. */
+  Prev,
+  /** Next step / complete tour button. */
+  Next,
+  /** Dismiss tour button emitting skip event. */
+  Skip,
+}
diff --git a/packages/0/src/components/index.ts b/packages/0/src/components/index.ts
index 431c9b8d9..83e37802a 100644
--- a/packages/0/src/components/index.ts
+++ b/packages/0/src/components/index.ts
@@ -27,4 +27,5 @@ export * from './Single'
 export * from './Step'
 export * from './Tabs'
 export * from './Theme'
+export * from './Tour'
 export * from './Treeview'
diff --git a/packages/0/src/composables/index.ts b/packages/0/src/composables/index.ts
index 5eef814b0..bcdd92bf7 100644
--- a/packages/0/src/composables/index.ts
+++ b/packages/0/src/composables/index.ts
@@ -52,6 +52,7 @@ export * from './useTimer'
 export * from './createTimeline'
 export * from './createValidation'
 export * from './useToggleScope'
+export * from './useTour'
 export * from './createTokens'
 export * from './createVirtual'
 export * from './useVirtualFocus'
diff --git a/packages/0/src/composables/useTour/index.test.ts b/packages/0/src/composables/useTour/index.test.ts
new file mode 100644
index 000000000..1d054573d
--- /dev/null
+++ b/packages/0/src/composables/useTour/index.test.ts
@@ -0,0 +1,332 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createTour, createTourPlugin } from '.'
+
+describe('useTour', () => {
+  describe('createTour', () => {
+    it('should create tour with default state', () => {
+      const tour = createTour()
+
+      expect(tour.isActive.value).toBe(false)
+      expect(tour.isComplete.value).toBe(false)
+      expect(tour.isReady.value).toBe(true)
+      expect(tour.isFirst.value).toBe(false)
+      expect(tour.isLast.value).toBe(true)
+      expect(tour.canGoBack.value).toBe(false)
+      expect(tour.canGoNext.value).toBe(false)
+      expect(tour.total).toBe(0)
+      expect(tour.selectedId.value).toBeUndefined()
+    })
+
+    it('should expose composed primitives', () => {
+      const tour = createTour()
+
+      expect(tour.steps).toBeDefined()
+      expect(tour.steps.register).toBeDefined()
+      expect(tour.activators).toBeDefined()
+      expect(tour.activators.register).toBeDefined()
+      expect(tour.form).toBeDefined()
+      expect(tour.form.has).toBeDefined()
+    })
+
+    it('should expose navigation methods', () => {
+      const tour = createTour()
+
+      expect(typeof tour.start).toBe('function')
+      expect(typeof tour.stop).toBe('function')
+      expect(typeof tour.complete).toBe('function')
+      expect(typeof tour.reset).toBe('function')
+      expect(typeof tour.next).toBe('function')
+      expect(typeof tour.prev).toBe('function')
+      expect(typeof tour.step).toBe('function')
+      expect(typeof tour.ready).toBe('function')
+    })
+  })
+
+  describe('start', () => {
+    it('should activate tour and select first step', () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+        { id: 'step-3' },
+      ])
+
+      tour.start()
+
+      expect(tour.isActive.value).toBe(true)
+      expect(tour.isComplete.value).toBe(false)
+      expect(tour.selectedId.value).toBe('step-1')
+      expect(tour.isFirst.value).toBe(true)
+      expect(tour.total).toBe(3)
+    })
+
+    it('should start at specific step', () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+      ])
+
+      tour.start({ stepId: 'step-2' })
+
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+  })
+
+  describe('stop', () => {
+    it('should deactivate tour', () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }])
+      tour.start()
+
+      tour.stop()
+
+      expect(tour.isActive.value).toBe(false)
+      expect(tour.isComplete.value).toBe(false)
+    })
+  })
+
+  describe('complete', () => {
+    it('should mark tour as complete', () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }])
+      tour.start()
+
+      tour.complete()
+
+      expect(tour.isActive.value).toBe(false)
+      expect(tour.isComplete.value).toBe(true)
+    })
+  })
+
+  describe('reset', () => {
+    it('should clear all state', () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }])
+      tour.start()
+
+      tour.reset()
+
+      expect(tour.isActive.value).toBe(false)
+      expect(tour.isComplete.value).toBe(false)
+      expect(tour.total).toBe(0)
+      expect(tour.selectedId.value).toBeUndefined()
+    })
+  })
+
+  describe('next', () => {
+    it('should advance to next step', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+        { id: 'step-3' },
+      ])
+      tour.start()
+
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+
+    it('should not advance past last step', async () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }, { id: 'step-2' }])
+      tour.start()
+      await tour.next()
+
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+
+    it('should not advance when not ready', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1', type: 'wait' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-1')
+    })
+
+    it('should advance after ready() on wait step', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1', type: 'wait' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+
+      tour.ready()
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+  })
+
+  describe('prev', () => {
+    it('should go to previous step', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+      await tour.next()
+
+      tour.prev()
+
+      expect(tour.selectedId.value).toBe('step-1')
+    })
+
+    it('should not go before first step', () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }, { id: 'step-2' }])
+      tour.start()
+
+      tour.prev()
+
+      expect(tour.selectedId.value).toBe('step-1')
+    })
+  })
+
+  describe('step', () => {
+    it('should jump to step by index', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+        { id: 'step-3' },
+      ])
+      tour.start()
+
+      await tour.step(3)
+
+      expect(tour.selectedId.value).toBe('step-3')
+    })
+
+    it('should do nothing for invalid index', async () => {
+      const tour = createTour()
+      tour.steps.onboard([{ id: 'step-1' }])
+      tour.start()
+
+      await tour.step(999)
+
+      expect(tour.selectedId.value).toBe('step-1')
+    })
+  })
+
+  describe('isReady', () => {
+    it('should be true for non-wait steps', () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1', type: 'tooltip' },
+      ])
+      tour.start()
+
+      expect(tour.isReady.value).toBe(true)
+    })
+
+    it('should be false for wait steps', () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1', type: 'wait' },
+      ])
+      tour.start()
+
+      expect(tour.isReady.value).toBe(false)
+    })
+
+    it('should reset on step change', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2', type: 'wait' },
+      ])
+      tour.start()
+      expect(tour.isReady.value).toBe(true)
+
+      await tour.next()
+
+      expect(tour.isReady.value).toBe(false)
+    })
+  })
+
+  describe('validation', () => {
+    it('should block next when validation fails', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+
+      tour.form.register({ id: 'step-1', value: {} as any })
+      const submitSpy = vi.spyOn(tour.form, 'submit').mockResolvedValue(false)
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-1')
+      expect(submitSpy).toHaveBeenCalledWith('step-1')
+    })
+
+    it('should allow next when validation passes', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+
+      tour.form.register({ id: 'step-1', value: {} as any })
+      vi.spyOn(tour.form, 'submit').mockResolvedValue(true)
+
+      await tour.next()
+
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+
+    it('should skip validation when no form registered for step', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+      ])
+      tour.start()
+
+      const submitSpy = vi.spyOn(tour.form, 'submit')
+      await tour.next()
+
+      expect(submitSpy).not.toHaveBeenCalled()
+      expect(tour.selectedId.value).toBe('step-2')
+    })
+
+    it('should validate before step() jump', async () => {
+      const tour = createTour()
+      tour.steps.onboard([
+        { id: 'step-1' },
+        { id: 'step-2' },
+        { id: 'step-3' },
+      ])
+      tour.start()
+
+      tour.form.register({ id: 'step-1', value: {} as any })
+      vi.spyOn(tour.form, 'submit').mockResolvedValue(false)
+
+      await tour.step(3)
+
+      expect(tour.selectedId.value).toBe('step-1')
+    })
+  })
+
+  describe('createTourPlugin', () => {
+    it('should create a Vue plugin', () => {
+      const plugin = createTourPlugin()
+      expect(plugin.install).toBeDefined()
+    })
+  })
+})
diff --git a/packages/0/src/composables/useTour/index.ts b/packages/0/src/composables/useTour/index.ts
new file mode 100644
index 000000000..0884e1ecf
--- /dev/null
+++ b/packages/0/src/composables/useTour/index.ts
@@ -0,0 +1,214 @@
+/**
+ * @module useTour
+ *
+ * @remarks
+ * Headless guided tour plugin. Composes createStep, createRegistry,
+ * and createForm for step orchestration, activator tracking,
+ * and validation gates.
+ *
+ * Key features:
+ * - Step types: tooltip, dialog, floating, wait
+ * - Form validation gates on navigation
+ * - Activator element registry
+ * - isReady gate for wait-type steps
+ */
+
+// Composables
+import { createForm } from '#v0/composables/createForm'
+import { createPluginContext } from '#v0/composables/createPlugin'
+import { createRegistry } from '#v0/composables/createRegistry'
+import { createStep } from '#v0/composables/createStep'
+
+// Utilities
+import { isUndefined } from '#v0/utilities'
+import { readonly, shallowRef, toRef } from 'vue'
+
+// Types
+import type { FormContext } from '#v0/composables/createForm'
+import type { RegistryContext, RegistryTicket } from '#v0/composables/createRegistry'
+import type { StepContext, StepTicket, StepTicketInput } from '#v0/composables/createStep'
+import type { MaybeElementRef } from '#v0/composables/toElement'
+import type { ID } from '#v0/types'
+import type { Ref, ShallowRef } from 'vue'
+
+// ---- Types ----
+
+export type TourStepType = 'tooltip' | 'dialog' | 'floating' | 'wait'
+
+export type TourStepInput = StepTicketInput & {
+  type?: TourStepType
+  placement?: string
+  placementMobile?: string
+}
+
+export type TourStepTicket = StepTicket<TourStepInput>
+
+export type TourActivatorTicket = RegistryTicket & {
+  element: MaybeElementRef
+  padding?: number
+}
+
+export interface TourContext {
+  steps: StepContext<TourStepTicket>
+  activators: RegistryContext<TourActivatorTicket>
+  form: FormContext
+
+  isActive: Readonly<ShallowRef<boolean>>
+  isComplete: Readonly<ShallowRef<boolean>>
+  isFirst: Readonly<Ref<boolean>>
+  isLast: Readonly<Ref<boolean>>
+  canGoBack: Readonly<Ref<boolean>>
+  canGoNext: Readonly<Ref<boolean>>
+  isReady: Readonly<ShallowRef<boolean>>
+  selectedId: StepContext<TourStepTicket>['selectedId']
+  total: number
+
+  start: (options?: { stepId?: ID }) => void
+  ready: () => void
+  stop: () => void
+  complete: () => void
+  reset: () => void
+  next: () => Promise<void>
+  prev: () => void
+  step: (index: number) => Promise<void>
+}
+
+// ---- Factory ----
+
+export function createTour (): TourContext {
+  const steps = createStep<TourStepTicket>({ events: true, reactive: true })
+  const activators = createRegistry<TourActivatorTicket>()
+  const form = createForm()
+
+  const isActive = shallowRef(false)
+  const isComplete = shallowRef(false)
+  const isReady = shallowRef(true)
+
+  const isFirst = toRef(() => steps.selectedIndex.value === 0)
+  const isLast = toRef(() => steps.selectedIndex.value === steps.size - 1)
+  const canGoBack = toRef(() => isReady.value && steps.selectedIndex.value > 0)
+  const canGoNext = toRef(() => isReady.value && steps.selectedIndex.value < steps.size - 1)
+
+  function start (options?: { stepId?: ID }) {
+    isActive.value = true
+    isComplete.value = false
+
+    if (options?.stepId && steps.has(options.stepId)) {
+      steps.select(options.stepId)
+    } else {
+      steps.first()
+    }
+
+    syncReady()
+  }
+
+  function ready () {
+    isReady.value = true
+  }
+
+  function stop () {
+    isActive.value = false
+    isReady.value = true
+  }
+
+  function complete () {
+    isActive.value = false
+    isComplete.value = true
+    isReady.value = true
+  }
+
+  function reset () {
+    form.reset()
+    steps.clear()
+    isActive.value = false
+    isComplete.value = false
+    isReady.value = true
+  }
+
+  function syncReady () {
+    const current = steps.selectedItem.value
+    if (!current) {
+      isReady.value = true
+      return
+    }
+    isReady.value = current.type !== 'wait'
+  }
+
+  async function next () {
+    if (!isReady.value) return
+
+    const current = steps.selectedItem.value
+    if (!current) return
+
+    if (form.has(current.id)) {
+      const isValid = await form.submit(current.id)
+      if (!isValid) return
+    }
+
+    steps.next()
+    syncReady()
+  }
+
+  function prev () {
+    if (!isReady.value) return
+
+    const current = steps.selectedItem.value
+    if (!current) return
+
+    steps.prev()
+    syncReady()
+  }
+
+  async function step (index: number) {
+    if (!isReady.value) return
+
+    const current = steps.selectedItem.value
+    const id = steps.lookup(index - 1)
+    if (isUndefined(id)) return
+
+    if (current && current.id !== id && form.has(current.id)) {
+      const isValid = await form.submit(current.id)
+      if (!isValid) return
+    }
+
+    steps.select(id)
+    syncReady()
+  }
+
+  return {
+    steps,
+    activators,
+    form,
+
+    isActive: readonly(isActive),
+    isComplete: readonly(isComplete),
+    isFirst,
+    isLast,
+    canGoBack,
+    canGoNext,
+    isReady: readonly(isReady),
+    selectedId: steps.selectedId,
+    get total () {
+      return steps.size
+    },
+
+    start,
+    ready,
+    stop,
+    complete,
+    reset,
+    next,
+    prev,
+    step,
+  }
+}
+
+// ---- Plugin ----
+
+export const [createTourContext, createTourPlugin, useTour] = createPluginContext<
+  { namespace?: string },
+  TourContext
+>(
+  'v0:tour',
+  () => createTour(),
+)
diff --git a/packages/0/src/maturity.json b/packages/0/src/maturity.json
index 6f2ce79d3..7f7ca0a30 100644
--- a/packages/0/src/maturity.json
+++ b/packages/0/src/maturity.json
@@ -292,6 +292,11 @@
       "level": "preview",
       "since": "0.1.8",
       "category": "system"
+    },
+    "useTour": {
+      "level": "preview",
+      "since": "0.2.0",
+      "category": "plugins"
     }
   },
   "components": {
@@ -346,7 +351,7 @@
     },
     "Toggle": {
       "level": "draft",
-      "category": "providers"
+      "category": "actions"
     },
     "Button": {
       "level": "preview",
@@ -447,10 +452,6 @@
       "since": "0.1.9",
       "category": "semantic"
     },
-    "Toast": {
-      "level": "draft",
-      "category": "disclosure"
-    },
     "Tooltip": {
       "level": "draft",
       "category": "disclosure"
@@ -509,8 +510,9 @@
       "category": "data"
     },
     "Tour": {
-      "level": "draft",
-      "category": "specialty"
+      "level": "preview",
+      "since": "0.2.0",
+      "category": "disclosure"
     }
   },
   "utilities": {