feat(*): add tour

[cschroeter]

import { Tour, useTour } from '@ark-ui/react/tour'
import { XIcon } from 'lucide-react'
import { useEffect } from 'react'
import { steps } from './steps'

export const DemoTour = () => {
  const tour = useTour({ steps })

  // Start the tour when the component mounts
  useEffect(() => {
    tour.start()
  }, [])

  return (
    <Tour.Root tour={tour}>
      <Tour.Backdrop />
      <Tour.Spotlight />
      <Tour.Positioner>
        <Tour.Content>
          <Tour.Arrow>
            <Tour.ArrowTip />
          </Tour.Arrow>
          <Tour.Title />
          <Tour.Description />
          <Tour.ProgressText />
          <Tour.CloseTrigger>
            <XIcon />
          </Tour.CloseTrigger>
          <Tour.Control>
            <Tour.Actions>
              {(actions) =>
                actions.map((action) => <Tour.ActionTrigger key={action.label} action={action} />)
              }
            </Tour.Actions>
          </Tour.Control>
        </Tour.Content>
      </Tour.Positioner>
    </Tour.Root>
  )
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ark-docs	✅ Ready (Inspect)	Visit Preview	Jan 11, 2025 9:22am

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/react@3135

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/solid@3135

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/svelte@3135

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/vue@3135

commit: 1033e22