Does react-joyride auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is react-joyride free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

react-joyride

Create guided tours in your apps

FLOW.md

gilbarbara@gilbarbara

GitHub

Plugin Signal61/100Solid

maintained84

capable14

documented75

adopted83

Install

$ npx -y skills add gilbarbara/react-joyride --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

TypeScript JavaScript React Next.js Bash

+1 tag

GitHub

7,832

Stars

592

Forks

Maintained

Maintenance

TypeScript

Language

MIT

License

1mo ago

Last commit

10y ago

Created

Repo: gilbarbara/react-joyride

In this plugin

1 skill

- react-joyride

See everything inside

What's inside

Skills

/react-joyrideGuide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions joyride, guided tour, onboarding tour, walkthrough, tooltip tour, step-by-step guide, product tour, or wants to highlight UI elements sequentially. Also

Badges

README

Read on GitHub

React Joyride

Create awesome tours for your app!

Showcase your app to new users or explain the functionality of new features.

Highlights

🎨 Easy to use: Just set the steps and you're good to go
🔧 Customizable: Use your own components and styles
♿ Accessible: Focus trapping, keyboard navigation, and ARIA support
📦 Lightweight: ~30% smaller bundle than v2
🔄 Broad compatibility: React 16.8+ through React 19
🖥️ SSR-safe: Works with Next.js, Remix, and other server-rendering frameworks

Resources

Setup

npm i react-joyride

Quick Start

Component API

import { Joyride } from 'react-joyride';

const steps = [
  { target: '.my-first-step', content: 'This is my awesome feature!' },
  { target: '.my-other-step', content: 'This is another awesome feature!' },
];

export function App() {
  return (
    <div>
      <Joyride run steps={steps} />
      {/* your app */}
    </div>
  );
}

Hook API

import { useJoyride } from 'react-joyride';

const steps = [
  { target: '.my-first-step', content: 'This is my awesome feature!' },
  { target: '.my-other-step', content: 'This is another awesome feature!' },
];

export function App() {
  const { controls, state, Tour } = useJoyride({ steps });

  return (
    <div>
      <button onClick={() => controls.start()}>Start Tour</button>
      {Tour}
      {/* your app */}
    </div>
  );
}

Agent Skill

Enable AI assistants to implement guided tours with React Joyride.

The skill gives your AI assistant comprehensive knowledge of the API, step configuration, events, custom components, and common patterns.

npx skills add gilbarbara/react-joyride

Migration from v2

Check the migration guide for detailed instructions on upgrading from v2.

License

MIT

File tree

586

gilbarbara/react-joyrideView on GitHub

.dockerignore
.editorconfig
.github/
  ISSUE_TEMPLATE/
    bug_report.yml
    config.yml
  workflows/
    ci.yml
.gitignore
.husky/
  post-merge
  pre-commit
.prettierignore
CLAUDE.md
CONTRIBUTING.md
docs/
  architecture.md
e2e/
  __setup__/
    global.d.ts
    utils.ts
  __snapshots__/
    carousel/
      initial-chromium.png
      initial-firefox.png
      initial-webkit.png
      step1-image-1-chromium.png
      step1-image-1-firefox.png
      step1-image-1-webkit.png
      step2-image-2-chromium.png
      step2-image-2-firefox.png
      step2-image-2-webkit.png
      step3-image-5-chromium.png
      step3-image-5-firefox.png
      step3-image-5-webkit.png
      step4-loop-forward-chromium.png
      step4-loop-forward-firefox.png
      step4-loop-forward-webkit.png
      step5-loop-backward-chromium.png
      step5-loop-backward-firefox.png
      step5-loop-backward-webkit.png
      step6-image-3-chromium.png
      step6-image-3-firefox.png
      step6-image-3-webkit.png
      step7-closed-chromium.png
      step7-closed-firefox.png
      step7-closed-webkit.png
      step8-reopened-chromium.png
      step8-reopened-firefox.png
      step8-reopened-webkit.png
      step9-image-4-chromium.png
      step9-image-4-firefox.png
      step9-image-4-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    chat/
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-replay-beacon-chromium.png
      step2-replay-beacon-firefox.png
      step2-replay-beacon-webkit.png
      step2-replay-tooltip-chromium.png
      step2-replay-tooltip-firefox.png
      step2-replay-tooltip-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      step5-tooltip-chromium.png
      step5-tooltip-firefox.png
      step5-tooltip-webkit.png
      step6-tooltip-chromium.png
      step6-tooltip-firefox.png
      step6-tooltip-webkit.png
      step7-tooltip-chromium.png
      step7-tooltip-firefox.png
      step7-tooltip-webkit.png
      step8-tooltip-chromium.png
      step8-tooltip-firefox.png
      step8-tooltip-webkit.png
      step9-tooltip-chromium.png
      step9-tooltip-firefox.png
      step9-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    controlled/
      initial-chromium.png
      initial-firefox.png
      initial-webkit.png
      step1-menu-chromium.png
      step1-menu-firefox.png
      step1-menu-webkit.png
      step2-notifications-chromium.png
      step2-notifications-firefox.png
      step2-notifications-webkit.png
      step3-mark-as-read-chromium.png
      step3-mark-as-read-firefox.png
      step3-mark-as-read-webkit.png
      step4-calendar-chromium.png
      step4-calendar-firefox.png
      step4-calendar-webkit.png
      step5-growth-chromium.png
      step5-growth-firefox.png
      step5-growth-webkit.png
      step6-loader-chromium.png
      step6-loader-firefox.png
      step6-loader-webkit.png
      step7-replay-beacon-chromium.png
      step7-replay-beacon-firefox.png
      step7-replay-beacon-webkit.png
      step7-replay-tooltip-chromium.png
      step7-replay-tooltip-firefox.png
      step7-replay-tooltip-webkit.png
      step7-users-chromium.png
      step7-users-firefox.png
      step7-users-webkit.png
      step8-connections-chromium.png
      step8-connections-firefox.png
      step8-connections-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    custom-components/
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-beacon-chromium.png
      step2-beacon-firefox.png
      step2-beacon-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step2a-tooltip-continuous-chromium.png
      step2a-tooltip-continuous-firefox.png
      step2a-tooltip-continuous-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    modal-heroui/
      initial-chromium.png
      initial-firefox.png
      initial-webkit.png
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      step5-tooltip-chromium.png
      step5-tooltip-firefox.png
      step5-tooltip-webkit.png
      step6-tooltip-chromium.png
      step6-tooltip-firefox.png
      step6-tooltip-webkit.png
      step7-tooltip-chromium.png
      step7-tooltip-firefox.png
      step7-tooltip-webkit.png
      step8-tooltip-chromium.png
      step8-tooltip-firefox.png
      step8-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    modal-react/
      initial-chromium.png
      initial-firefox.png
      initial-webkit.png
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    multi-route/
      initial-chromium.png
      initial-firefox.png
      initial-webkit.png
      step1-home-chromium.png
      step1-home-firefox.png
      step1-home-webkit.png
      step2-route-a-chromium.png
      step2-route-a-firefox.png
      step2-route-a-webkit.png
      step3-route-b-chromium.png
      step3-route-b-firefox.png
      step3-route-b-webkit.png
      step3-route-b-with-extra-step-chromium.png
      step3-route-b-with-extra-step-firefox.png
      step3-route-b-with-extra-step-webkit.png
      step4-route-c-chromium.png
      step4-route-c-firefox.png
      step4-route-c-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    overview/
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-loader-chromium.png
      step2-loader-firefox.png
      step2-loader-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      step5-tooltip-chromium.png
      step5-tooltip-firefox.png
      step5-tooltip-webkit.png
      step6-tooltip-chromium.png
      step6-tooltip-firefox.png
      step6-tooltip-webkit.png
      step7-tooltip-chromium.png
      step7-tooltip-firefox.png
      step7-tooltip-webkit.png
      step8-tooltip-chromium.png
      step8-tooltip-firefox.png
      step8-tooltip-webkit.png
      step9-tooltip-chromium.png
      step9-tooltip-firefox.png
      step9-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
    scroll/
      step1-beacon-chromium.png
      step1-beacon-firefox.png
      step1-beacon-webkit.png
      step1-tooltip-chromium.png
      step1-tooltip-firefox.png
      step1-tooltip-webkit.png
      step2-tooltip-chromium.png
      step2-tooltip-firefox.png
      step2-tooltip-webkit.png
      step3-tooltip-chromium.png
      step3-tooltip-firefox.png
      step3-tooltip-webkit.png
      step4-tooltip-chromium.png
      step4-tooltip-firefox.png
      step4-tooltip-webkit.png
      step5-tooltip-chromium.png
      step5-tooltip-firefox.png
      step5-tooltip-webkit.png
      tour-end-chromium.png
      tour-end-firefox.png
      tour-end-webkit.png
  .gitignore
  carousel.spec.ts
  chat.spec.ts
  controlled.spec.ts
  custom.spec.ts
  modal.spec.ts
  multi-route.spec.ts
  overview.spec.ts
  scroll.spec.ts
  tsconfig.json
eslint.config.mjs
LICENSE
package.json
playwright/
playwright.config.ts
  index.html
  index.tsx
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
skills/
  react-joyride/
    references/
      api-events-components.md
      api-props-options.md
      api-step-state-controls.md
      patterns.md
    SKILL.md
sonar-project.properties
src/
  components/
    Arrow.tsx
    Beacon.tsx
    Floater.tsx
    Loader.tsx
    Overlay.tsx
    Portal.tsx
    Step.tsx
    Tooltip/
      CloseButton.tsx
      DefaultTooltip.tsx
      index.tsx
    TourRenderer.tsx
  defaults.ts
  global.d.ts
  hooks/
    useControls.ts
    useDebugLogger.ts
    useEventEmitter.ts
    useFocusTrap.ts
    useJoyride.tsx
    useLifecycleEffect.ts
    usePortalElement.ts
    usePropSync.ts
    useScrollEffect.ts
    useTargetPosition.ts
    useTourEngine.ts
  index.tsx
  literals/
    index.ts
  modules/
    changes.ts
    dom.ts
    helpers.tsx
    step.ts
    store.ts
    svg.ts
  styles.ts
  types/
    common.ts
    components.ts
    events.ts
    floating.ts
    index.ts
    props.ts
    state.ts
    step.ts
    utilities.ts
test/
  __fixtures__/
    Component.tsx
    components/
      Beacon.tsx
      CustomArrow.tsx
      Loader.tsx
      Tooltip.tsx
    CustomOptions.tsx
    Hook.tsx
    steps.tsx
    styles.css
  __setup__/
    test-helpers.ts
    test-utils.ts
    tour-flow.tsx
    vitest.setup.ts
  __snapshots__/
    styles.spec.ts.snap
  components/
    __snapshots__/
      Arrow.spec.tsx.snap
      Beacon.spec.tsx.snap
      Floater.spec.tsx.snap
      Loader.spec.tsx.snap
      Overlay.spec.tsx.snap
      Tooltip.spec.tsx.snap
... 271 more

FAQ

react-joyride is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes react-joyride. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is react-joyride?: Create guided tours in your apps
How do I install react-joyride?: Run these in Claude Code: npx -y skills add gilbarbara/react-joyride --agent claude-code. Then prompt normally.
Does react-joyride auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is react-joyride free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

React Joyride

Create awesome tours for your app!

Showcase your app to new users or explain the functionality of new features.

Highlights

🎨 Easy to use: Just set the steps and you're good to go

🔧 Customizable: Use your own components and styles

♿ Accessible: Focus trapping, keyboard navigation, and ARIA support

📦 Lightweight: ~30% smaller bundle than v2

🔄 Broad compatibility: React 16.8+ through React 19

🖥️ SSR-safe: Works with Next.js, Remix, and other server-rendering frameworks

Resources

Quick Start

Component API

import { Joyride } from 'react-joyride'; const steps = [ { target: '.my-first-step', content: 'This is my awesome feature!' }, { target: '.my-other-step', content: 'This is another awesome feature!' }, ]; export function App() { return ( <div> <Joyride run steps={steps} /> {/* your app */} </div> ); }

Hook API

import { useJoyride } from 'react-joyride'; const steps = [ { target: '.my-first-step', content: 'This is my awesome feature!' }, { target: '.my-other-step', content: 'This is another awesome feature!' }, ]; export function App() { const { controls, state, Tour } = useJoyride({ steps }); return ( <div> <button onClick={() => controls.start()}>Start Tour</button> {Tour} {/* your app */} </div> ); }

.dockerignore .editorconfig .github/ ISSUE_TEMPLATE/ bug_report.yml config.yml workflows/ ci.yml .gitignore .husky/ post-merge pre-commit .prettierignore CLAUDE.md CONTRIBUTING.md docs/ architecture.md e2e/ __setup__/ global.d.ts utils.ts __snapshots__/ carousel/ initial-chromium.png initial-firefox.png initial-webkit.png step1-image-1-chromium.png step1-image-1-firefox.png step1-image-1-webkit.png step2-image-2-chromium.png step2-image-2-firefox.png step2-image-2-webkit.png step3-image-5-chromium.png step3-image-5-firefox.png step3-image-5-webkit.png step4-loop-forward-chromium.png step4-loop-forward-firefox.png step4-loop-forward-webkit.png step5-loop-backward-chromium.png step5-loop-backward-firefox.png step5-loop-backward-webkit.png step6-image-3-chromium.png step6-image-3-firefox.png step6-image-3-webkit.png step7-closed-chromium.png step7-closed-firefox.png step7-closed-webkit.png step8-reopened-chromium.png step8-reopened-firefox.png step8-reopened-webkit.png step9-image-4-chromium.png step9-image-4-firefox.png step9-image-4-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png chat/ step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-replay-beacon-chromium.png step2-replay-beacon-firefox.png step2-replay-beacon-webkit.png step2-replay-tooltip-chromium.png step2-replay-tooltip-firefox.png step2-replay-tooltip-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png step5-tooltip-chromium.png step5-tooltip-firefox.png step5-tooltip-webkit.png step6-tooltip-chromium.png step6-tooltip-firefox.png step6-tooltip-webkit.png step7-tooltip-chromium.png step7-tooltip-firefox.png step7-tooltip-webkit.png step8-tooltip-chromium.png step8-tooltip-firefox.png step8-tooltip-webkit.png step9-tooltip-chromium.png step9-tooltip-firefox.png step9-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png controlled/ initial-chromium.png initial-firefox.png initial-webkit.png step1-menu-chromium.png step1-menu-firefox.png step1-menu-webkit.png step2-notifications-chromium.png step2-notifications-firefox.png step2-notifications-webkit.png step3-mark-as-read-chromium.png step3-mark-as-read-firefox.png step3-mark-as-read-webkit.png step4-calendar-chromium.png step4-calendar-firefox.png step4-calendar-webkit.png step5-growth-chromium.png step5-growth-firefox.png step5-growth-webkit.png step6-loader-chromium.png step6-loader-firefox.png step6-loader-webkit.png step7-replay-beacon-chromium.png step7-replay-beacon-firefox.png step7-replay-beacon-webkit.png step7-replay-tooltip-chromium.png step7-replay-tooltip-firefox.png step7-replay-tooltip-webkit.png step7-users-chromium.png step7-users-firefox.png step7-users-webkit.png step8-connections-chromium.png step8-connections-firefox.png step8-connections-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png custom-components/ step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-beacon-chromium.png step2-beacon-firefox.png step2-beacon-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step2a-tooltip-continuous-chromium.png step2a-tooltip-continuous-firefox.png step2a-tooltip-continuous-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png modal-heroui/ initial-chromium.png initial-firefox.png initial-webkit.png step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png step5-tooltip-chromium.png step5-tooltip-firefox.png step5-tooltip-webkit.png step6-tooltip-chromium.png step6-tooltip-firefox.png step6-tooltip-webkit.png step7-tooltip-chromium.png step7-tooltip-firefox.png step7-tooltip-webkit.png step8-tooltip-chromium.png step8-tooltip-firefox.png step8-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png modal-react/ initial-chromium.png initial-firefox.png initial-webkit.png step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png multi-route/ initial-chromium.png initial-firefox.png initial-webkit.png step1-home-chromium.png step1-home-firefox.png step1-home-webkit.png step2-route-a-chromium.png step2-route-a-firefox.png step2-route-a-webkit.png step3-route-b-chromium.png step3-route-b-firefox.png step3-route-b-webkit.png step3-route-b-with-extra-step-chromium.png step3-route-b-with-extra-step-firefox.png step3-route-b-with-extra-step-webkit.png step4-route-c-chromium.png step4-route-c-firefox.png step4-route-c-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png overview/ step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-loader-chromium.png step2-loader-firefox.png step2-loader-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png step5-tooltip-chromium.png step5-tooltip-firefox.png step5-tooltip-webkit.png step6-tooltip-chromium.png step6-tooltip-firefox.png step6-tooltip-webkit.png step7-tooltip-chromium.png step7-tooltip-firefox.png step7-tooltip-webkit.png step8-tooltip-chromium.png step8-tooltip-firefox.png step8-tooltip-webkit.png step9-tooltip-chromium.png step9-tooltip-firefox.png step9-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png scroll/ step1-beacon-chromium.png step1-beacon-firefox.png step1-beacon-webkit.png step1-tooltip-chromium.png step1-tooltip-firefox.png step1-tooltip-webkit.png step2-tooltip-chromium.png step2-tooltip-firefox.png step2-tooltip-webkit.png step3-tooltip-chromium.png step3-tooltip-firefox.png step3-tooltip-webkit.png step4-tooltip-chromium.png step4-tooltip-firefox.png step4-tooltip-webkit.png step5-tooltip-chromium.png step5-tooltip-firefox.png step5-tooltip-webkit.png tour-end-chromium.png tour-end-firefox.png tour-end-webkit.png .gitignore carousel.spec.ts chat.spec.ts controlled.spec.ts custom.spec.ts modal.spec.ts multi-route.spec.ts overview.spec.ts scroll.spec.ts tsconfig.json eslint.config.mjs LICENSE package.json playwright/ playwright.config.ts index.html index.tsx pnpm-lock.yaml pnpm-workspace.yaml README.md skills/ react-joyride/ references/ api-events-components.md api-props-options.md api-step-state-controls.md patterns.md SKILL.md sonar-project.properties src/ components/ Arrow.tsx Beacon.tsx Floater.tsx Loader.tsx Overlay.tsx Portal.tsx Step.tsx Tooltip/ CloseButton.tsx DefaultTooltip.tsx index.tsx TourRenderer.tsx defaults.ts global.d.ts hooks/ useControls.ts useDebugLogger.ts useEventEmitter.ts useFocusTrap.ts useJoyride.tsx useLifecycleEffect.ts usePortalElement.ts usePropSync.ts useScrollEffect.ts useTargetPosition.ts useTourEngine.ts index.tsx literals/ index.ts modules/ changes.ts dom.ts helpers.tsx step.ts store.ts svg.ts styles.ts types/ common.ts components.ts events.ts floating.ts index.ts props.ts state.ts step.ts utilities.ts test/ __fixtures__/ Component.tsx components/ Beacon.tsx CustomArrow.tsx Loader.tsx Tooltip.tsx CustomOptions.tsx Hook.tsx steps.tsx styles.css __setup__/ test-helpers.ts test-utils.ts tour-flow.tsx vitest.setup.ts __snapshots__/ styles.spec.ts.snap components/ __snapshots__/ Arrow.spec.tsx.snap Beacon.spec.tsx.snap Floater.spec.tsx.snap Loader.spec.tsx.snap Overlay.spec.tsx.snap Tooltip.spec.tsx.snap ... 271 more