Describe the feature

It would be great if Nuxt UI could provide a built-in, customizable feature tour / onboarding guide component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.

Motivation

• Helps improve user onboarding and product discovery.
• Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.
• Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.

Proposed Features

• Ability to define steps with selector, title, description, and position.
• Configurable highlight styles (border, shadow, spotlight cut-out).
• Built-in navigation controls (Next, Previous, Finish).
• Option to scroll to target elements automatically.
• Theming support with Nuxt UI tokens.
• Accessibility support (keyboard navigation, ARIA roles).

Example API (pseudo-code)

<UTour :steps="steps" v-model="active" />

<script setup lang="ts">
const steps = [
  { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },
  { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }
]
</script>

Alternatives Considered

• External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.

Additional Context
This would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.