# react-joyride

> Create guided tours for your apps

Latest version **3.2.0** (published 2026-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-joyride
pnpm add react-joyride
yarn add react-joyride
bun add react-joyride
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.2.0 |
| Published | 2026-07-09 |
| First published | 2015-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 703.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7871 |
| Author | Gil Barbara |
| Maintainers | gilbarbara |
| Keywords | react, react-component, tooltips, joyride, walkthroughs, tour |

## Links

- npm: https://www.npmjs.com/package/react-joyride
- Repository: https://github.com/gilbarbara/react-joyride
- Homepage: https://react-joyride.com/
- Issues: https://github.com/gilbarbara/react-joyride/issues
- npm.io page: https://npm.io/package/react-joyride

## Dependencies (10)

- [scroll](https://npm.io/package/scroll.md) ^3.0.1
- [is-lite](https://npm.io/package/is-lite.md) ^2.0.0
- [scrollparent](https://npm.io/package/scrollparent.md) ^2.1.0
- [react-innertext](https://npm.io/package/react-innertext.md) ^1.1.5
- [@gilbarbara/hooks](https://npm.io/package/@gilbarbara/hooks.md) ^0.11.0
- [@gilbarbara/types](https://npm.io/package/@gilbarbara/types.md) ^0.2.2
- [@fastify/deepmerge](https://npm.io/package/@fastify/deepmerge.md) ^3.2.1
- [@floating-ui/react-dom](https://npm.io/package/@floating-ui/react-dom.md) ^2.1.8
- [@gilbarbara/deep-equal](https://npm.io/package/@gilbarbara/deep-equal.md) ^0.4.1
- [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.2.0 (latest) — 2026-07-09
- 3.1.0 — 2026-04-29
- 3.0.2 — 2026-04-01
- 3.0.1 — 2026-03-31
- 3.0.0 — 2026-03-23
- 3.0.0-rc.3 — 2026-03-22
- 3.0.0-rc.2 — 2026-03-22
- 3.0.0-rc.1 — 2026-03-21
- 3.0.0-7 — 2024-11-20
- 2.9.3 — 2024-11-18
- 3.0.0-6 — 2024-09-30
- 3.0.0-5 — 2024-09-30
- 3.0.0-4 — 2024-09-17
- 3.0.0-3 — 2024-09-15
- 3.0.0-2 — 2024-09-13
- … 130 more at https://npm.io/package/react-joyride/versions

## README

# React Joyride

[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/ci.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/ci.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)

#### Create awesome tours for your app!

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

[![Joyride example image](https://react-joyride.com/images/react-joyride-v3.gif)](https://react-joyride.com/)

### 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

- [Documentation](https://react-joyride.com/docs/getting-started)
- [Demos](https://react-joyride.com/demos)
- [What's new in v3](https://react-joyride.com/docs/new-in-v3)
- [StackBlitz Playground](https://stackblitz.com/edit/react-joyride)

## Setup

```bash
npm i react-joyride
```

## Quick Start

### Component API

```tsx
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

```tsx
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.

```bash
npx skills add gilbarbara/react-joyride
```

## Migration from v2

Check the [migration guide](https://react-joyride.com/docs/migration) for detailed instructions on upgrading from v2.

## License
MIT

---
_Source: https://npm.io/package/react-joyride · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._