guideui-vue

Vue 3 components for GuideUI — the onboarding & accessibility toolkit. Voice tooltips, guided tours, coach marks, spotlight, command palette, and an AI help widget. Fully typed, WCAG-compliant, SSR-safe (Nuxt ready), and tree-shakeable.

Install

npm install guideui-vue guideui-themes

Quick start

<script setup lang="ts">
import { GuideProvider, Tour, VoiceTooltip } from 'guideui-vue';
import 'guideui-themes/all.css';

const steps = [
  { target: '#new-project', title: 'Create a project', content: 'Start here.' },
  { target: '#invite', title: 'Invite your team', content: 'Collaborate instantly.' },
];
</script>

<template>
  <GuideProvider>
    <VoiceTooltip text="Create a new project." trigger="hover">
      <button id="new-project">New Project</button>
    </VoiceTooltip>
    <Tour :steps="steps" auto-start />
  </GuideProvider>
</template>

Or register everything globally:

import { GuideUIPlugin } from 'guideui-vue';
app.use(GuideUIPlugin);

Components

<VoiceTooltip> · <Tour> · <CoachMarks> · <Spotlight> · <CommandPalette> · <QuestionAssistant> · <Icon>

Composables

useTour(), useVoice(), useTheme()

Nuxt

SSR-safe out of the box. See guideui-vue/nuxt for the Nuxt module helper.

Accessibility

WCAG 2.2 AA: full keyboard navigation, ARIA roles, screen-reader announcements, focus trapping, prefers-reduced-motion support.

MIT © GuideUI