Tour

A guided tour component that highlights elements and walks users through a sequence of steps.

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Tour, useTour } from '@destyler-ui/vue'
import type { StepDetails } from '@destyler/tour'

const targetRef = ref<HTMLElement | null>(null)

const steps: StepDetails[] = [
  {
    id: 'step-1',
    type: 'tooltip',
    title: 'Welcome',
    description: 'Welcome to the tour!',
    target: () => targetRef.value,
    arrow: true,
    backdrop: true,
  },
]

const tour = useTour({ steps })

onMounted(() => {
  tour.value.start()
})
</script>

<template>
  <main>
    <button ref="targetRef">
      Target
    </button>

    <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.Control>
            <Tour.ActionTrigger action="prev">Prev</Tour.ActionTrigger>
            <Tour.ActionTrigger action="next">Next</Tour.ActionTrigger>
          </Tour.Control>
          <Tour.CloseTrigger>X</Tour.CloseTrigger>
        </Tour.Content>
      </Tour.Positioner>
    </Tour.Root>
  </main>
</template>

import type { StepDetails } from '@destyler/tour'
import { useEffect, useRef } from 'react'
import { Tour, useTour } from '@destyler-ui/react'

export function Basic() {
  const targetRef = useRef<HTMLButtonElement>(null)

  const steps: StepDetails[] = [
    {
      id: 'step-1',
      type: 'tooltip',
      title: 'Welcome',
      description: 'Welcome to the tour!',
      target: () => targetRef.current,
      arrow: true,
      backdrop: true,
    },
  ]

  const tour = useTour({ steps })

  useEffect(() => {
    tour.start()
  }, [tour])

  return (
    <main>
      <button ref={targetRef}>
        Target
      </button>

      <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.Control>
              <Tour.ActionTrigger action="prev">Prev</Tour.ActionTrigger>
              <Tour.ActionTrigger action="next">Next</Tour.ActionTrigger>
            </Tour.Control>
            <Tour.CloseTrigger>X</Tour.CloseTrigger>
          </Tour.Content>
        </Tour.Positioner>
      </Tour.Root>
    </main>
  )
}

import { Frame } from '@destyler-ui/solid/frame'
import { DemoTour } from './tour'

export function 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 title="Tour step content">
            <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>
  )
}

<script lang="ts">
  import { onMount } from 'svelte'
  import type { TourRootProps, TourStepDetails } from '@destyler-ui/svelte'
  import { Tour, useTour } from '@destyler-ui/svelte'

  let target: HTMLButtonElement
  const props: Omit<TourRootProps, 'tour'> = $props()
  const id = $props.id()

  const steps: TourStepDetails[] = [
    {
      id: 'step-1',
      type: 'tooltip',
      title: 'Welcome',
      description: 'Welcome to the tour!',
      target: () => target,
      arrow: true,
      backdrop: true,
    },
  ]

  const tour = useTour({ id, steps })

  onMount(() => tour().start())
</script>

<main>
  <button bind:this={target}>Target</button>

  <Tour.Root {tour} {...props}>
    <Tour.Backdrop />
    <Tour.Spotlight />
    <Tour.Positioner data-testid="positioner">
      <Tour.Content>
        <Tour.Arrow>
          <Tour.ArrowTip />
        </Tour.Arrow>
        <Tour.Title />
        <Tour.Description />
        <Tour.ProgressText />
        <Tour.Control>
          <Tour.ActionTrigger action={{ label: 'Prev', action: 'prev' }}>Prev</Tour.ActionTrigger>
          <Tour.ActionTrigger action={{ label: 'Next', action: 'next' }}>Next</Tour.ActionTrigger>
        </Tour.Control>
        <Tour.CloseTrigger>X</Tour.CloseTrigger>
      </Tour.Content>
    </Tour.Positioner>
  </Tour.Root>
</main>

Anatomy

<script setup lang="ts">
import { Tour } from '@destyler-ui/vue'
</script>

<template>
  <Tour.Root>
    <Tour.Backdrop />
    <Tour.Spotlight />
    <Tour.Positioner>
      <Tour.Content>
        <Tour.Arrow>
          <Tour.ArrowTip />
        </Tour.Arrow>
        <Tour.Title />
        <Tour.Description />
        <Tour.ProgressText />
        <Tour.Actions>
          <Tour.ActionTrigger />
        </Tour.Actions>
        <Tour.CloseTrigger />
      </Tour.Content>
    </Tour.Positioner>
    <Tour.Control />
  </Tour.Root>
</template>

import { Tour } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Tour.Root>
      <Tour.Backdrop />
      <Tour.Spotlight />
      <Tour.Positioner>
        <Tour.Content>
          <Tour.Arrow>
            <Tour.ArrowTip />
          </Tour.Arrow>
          <Tour.Title />
          <Tour.Description />
          <Tour.ProgressText />
          <Tour.Actions>
            <Tour.ActionTrigger />
          </Tour.Actions>
          <Tour.CloseTrigger />
        </Tour.Content>
      </Tour.Positioner>
      <Tour.Control />
    </Tour.Root>
  )
}

import type { TourStepDetails } from '@destyler-ui/solid'
import { Tour, useTour } from '@destyler-ui/solid'
import { For } from 'solid-js'

const steps: TourStepDetails[] = [
  {
    id: 'welcome',
    type: 'dialog',
    title: 'Welcome',
    description: 'Welcome to the tour!',
    actions: [{ label: 'Finish', action: 'dismiss' }],
  },
]

export default function Basic() {
  const tour = useTour({ steps })

  return (
    <>
      <button type="button" onClick={() => tour().start()}>Start tour</button>
      <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.Control>
              <Tour.Actions>
                {actions => (
                  <For each={actions()}>
                    {action => <Tour.ActionTrigger action={action} />}
                  </For>
                )}
              </Tour.Actions>
            </Tour.Control>
            <Tour.CloseTrigger />
          </Tour.Content>
        </Tour.Positioner>
      </Tour.Root>
    </>
  )
}

<script lang="ts">
  import { onMount } from 'svelte'
  import type { TourStepDetails } from '@destyler-ui/svelte'
  import { Tour, useTour } from '@destyler-ui/svelte'

  let target: HTMLButtonElement
  const steps: TourStepDetails[] = [
    {
      id: 'welcome',
      type: 'tooltip',
      title: 'Welcome',
      description: 'Welcome to the tour!',
      target: () => target,
      arrow: true,
      backdrop: true,
    },
  ]
  const tour = useTour({ id: 'tour', steps })

  onMount(() => tour().start())
</script>

<button bind:this={target}>Target</button>

<Tour.Root {tour}>
  <Tour.Backdrop />
  <Tour.Spotlight />
  <Tour.Positioner>
    <Tour.Content>
      <Tour.Arrow>
        <Tour.ArrowTip />
      </Tour.Arrow>
      <Tour.Title />
      <Tour.Description />
      <Tour.ProgressText />
      <Tour.Control>
        <Tour.ActionTrigger action={{ label: 'Previous', action: 'prev' }}>
          Previous
        </Tour.ActionTrigger>
        <Tour.ActionTrigger action={{ label: 'Next', action: 'next' }}>
          Next
        </Tour.ActionTrigger>
      </Tour.Control>
      <Tour.CloseTrigger>Close</Tour.CloseTrigger>
    </Tour.Content>
  </Tour.Positioner>
</Tour.Root>

Examples

Basic

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Tour, useTour } from '@destyler-ui/vue'
import type { StepDetails } from '@destyler/tour'

const targetRef = ref<HTMLElement | null>(null)

const steps: StepDetails[] = [
  {
    id: 'step-1',
    type: 'tooltip',
    title: 'Welcome',
    description: 'Welcome to the tour!',
    target: () => targetRef.value,
    arrow: true,
    backdrop: true,
  },
]

const tour = useTour({ steps })

onMounted(() => {
  tour.value.start()
})
</script>

<template>
  <main>
    <button ref="targetRef">
      Target
    </button>

    <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.Control>
            <Tour.ActionTrigger action="prev">Prev</Tour.ActionTrigger>
            <Tour.ActionTrigger action="next">Next</Tour.ActionTrigger>
          </Tour.Control>
          <Tour.CloseTrigger>X</Tour.CloseTrigger>
        </Tour.Content>
      </Tour.Positioner>
    </Tour.Root>
  </main>
</template>

import type { StepDetails } from '@destyler/tour'
import { useEffect, useRef } from 'react'
import { Tour, useTour } from '@destyler-ui/react'

export function Basic() {
  const targetRef = useRef<HTMLButtonElement>(null)

  const steps: StepDetails[] = [
    {
      id: 'step-1',
      type: 'tooltip',
      title: 'Welcome',
      description: 'Welcome to the tour!',
      target: () => targetRef.current,
      arrow: true,
      backdrop: true,
    },
  ]

  const tour = useTour({ steps })

  useEffect(() => {
    tour.start()
  }, [tour])

  return (
    <main>
      <button ref={targetRef}>
        Target
      </button>

      <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.Control>
              <Tour.ActionTrigger action="prev">Prev</Tour.ActionTrigger>
              <Tour.ActionTrigger action="next">Next</Tour.ActionTrigger>
            </Tour.Control>
            <Tour.CloseTrigger>X</Tour.CloseTrigger>
          </Tour.Content>
        </Tour.Positioner>
      </Tour.Root>
    </main>
  )
}

import { Frame } from '@destyler-ui/solid/frame'
import { DemoTour } from './tour'

export function 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 title="Tour step content">
            <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>
  )
}

<script lang="ts">
  import { onMount } from 'svelte'
  import type { TourRootProps, TourStepDetails } from '@destyler-ui/svelte'
  import { Tour, useTour } from '@destyler-ui/svelte'

  let target: HTMLButtonElement
  const props: Omit<TourRootProps, 'tour'> = $props()
  const id = $props.id()

  const steps: TourStepDetails[] = [
    {
      id: 'step-1',
      type: 'tooltip',
      title: 'Welcome',
      description: 'Welcome to the tour!',
      target: () => target,
      arrow: true,
      backdrop: true,
    },
  ]

  const tour = useTour({ id, steps })

  onMount(() => tour().start())
</script>

<main>
  <button bind:this={target}>Target</button>

  <Tour.Root {tour} {...props}>
    <Tour.Backdrop />
    <Tour.Spotlight />
    <Tour.Positioner data-testid="positioner">
      <Tour.Content>
        <Tour.Arrow>
          <Tour.ArrowTip />
        </Tour.Arrow>
        <Tour.Title />
        <Tour.Description />
        <Tour.ProgressText />
        <Tour.Control>
          <Tour.ActionTrigger action={{ label: 'Prev', action: 'prev' }}>Prev</Tour.ActionTrigger>
          <Tour.ActionTrigger action={{ label: 'Next', action: 'next' }}>Next</Tour.ActionTrigger>
        </Tour.Control>
        <Tour.CloseTrigger>X</Tour.CloseTrigger>
      </Tour.Content>
    </Tour.Positioner>
  </Tour.Root>
</main>

API Reference

Root

Prop	Default	Type
`tour*`	—	`MachineApi<PropTypes>`
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`focusOutside`	`[event: FocusOutsideEvent]` Function called when the focus is moved outside the component
`interactOutside`	`[event: InteractOutsideEvent]` Function called when an interaction happens outside the component
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Function called when the pointer is pressed down outside the component
`statusChange`	`[details: StatusChangeDetails]` Callback when the tour is opened or closed
`stepChange`	`[details: StepChangeDetails]` Callback when the highlighted step changes

Actions

No serializable props or emits are declared for this part.

ActionTrigger

Prop	Default	Type
`action*`	—	`StepAction`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Backdrop

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ProgressText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Spotlight

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`tour*`	—	`UseTourReturn`
`children`	—	`null \| string \| number \| bigint \| false \| true \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| react82.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react82.ReactPortal \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| null \| undefined>`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Actions

Prop	Default	Type
`children*`	—	`(actions: StepAction[]) => ReactNode`

ActionTrigger

Prop	Default	Type
`action*`	—	`StepAction`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Backdrop

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTourContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ProgressText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Spotlight

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`tour*`	—	`UseTourReturn`
`children`	—	`null \| number \| false \| true \| Node \| solid_js25.JSX.ArrayElement \| (string & {})`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Actions

Prop	Default	Type
`children*`	—	`(actions: Accessor<StepAction[]>) => Element`

ActionTrigger

Prop	Default	Type
`action*`	—	`StepAction`
`asChild`	—	`(props: (userProps?: solid_js25.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Arrow

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Backdrop

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseTourContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Description

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ProgressText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Spotlight

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js25.JSX.HTMLAttributes<HTMLHeadingElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`tour*`	—	`UseTourReturn`
`children`	—	`Snippet<[]> \| undefined`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Actions

Prop	Default	Type
`children*`	—	`Snippet<[Accessor<StepAction[]>]>`

ActionTrigger

Prop	Default	Type
`action*`	—	`StepAction`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Arrow

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ArrowTip

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Backdrop

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

CloseTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Content

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseTourContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Description

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Positioner

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ProgressText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Spotlight

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Title

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"h2">]>`
`children`	—	`Snippet<[]> \| undefined`