guideui-react

React 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 (Next.js ready), and tree-shakeable.

Install

npm install guideui-react guideui-themes

Quick start

import { GuideProvider, Tour, VoiceTooltip } from 'guideui-react';
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.' },
];

export default function App() {
  return (
    <GuideProvider>
      <VoiceTooltip text="Create a new project." trigger="hover">
        <button id="new-project">New Project</button>
      </VoiceTooltip>
      <Tour steps={steps} autoStart />
    </GuideProvider>
  );
}

Components

| Component | Description | | --- | --- | | <VoiceTooltip> | Tooltip that speaks its text on hover / click / focus / auto (Web Speech, ElevenLabs, or OpenAI TTS) | | <Tour> | Guided tour with spotlight, arrows, progress, keyboard navigation | | <CoachMarks> | Multi-step pulsing highlights with popovers | | <Spotlight> | Dark overlay with a smooth rounded cutout around any element | | <CommandPalette> | ⌘K palette with fuzzy search and optional AI fallback | | <QuestionAssistant> | Floating AI help chat with streaming Markdown answers |

Hooks

useTour(), useVoice(), useTheme(), useGuide()

Theming

Light, dark, auto, and high-contrast themes via CSS variables:

import { useTheme } from 'guideui-react';
const { theme, setTheme } = useTheme();
setTheme('dark'); // 'light' | 'dark' | 'auto' | 'high-contrast'

Accessibility

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

MIT © GuideUI