---
name: "@tour"
slug: "tour"
description: "A single shadcn/ui-compatible component for building interactive product onboarding tours in React applications. Handles step sequencing, popover positioning relative to target elements, and progression controls, designed to integrate directly with shadcn/ui's existing Popover and Dialog primitives and Tailwind CSS styling. Free and open source (MIT). Use for: SaaS or internal tool UIs that need a lightweight, shadcn-native step-by-step onboarding tour without pulling in a heavyweight third-party tour library."
category: "Niche/single-purpose"
tags: ["design-system", "hooks", "loaders", "onboarding", "overlays", "saas", "theming"]
framework: "react"
license: "MIT"
author: "tonghohin"
website: "https://onboarding-tour.vercel.app"
github: "https://github.com/tonghohin/tour"
registry: "https://onboarding-tour.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 65
component_count: 1
generated_at: "2026-07-28T08:59:05.895Z"
---

# @tour

A single shadcn/ui-compatible component for building interactive product onboarding tours in React applications. Handles step sequencing, popover positioning relative to target elements, and progression controls, designed to integrate directly with shadcn/ui's existing Popover and Dialog primitives and Tailwind CSS styling. Free and open source (MIT). Use for: SaaS or internal tool UIs that need a lightweight, shadcn-native step-by-step onboarding tour without pulling in a heavyweight third-party tour library.

## Links

- Website: https://onboarding-tour.vercel.app
- GitHub: https://github.com/tonghohin/tour
- Registry JSON: https://onboarding-tour.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tour
- This file: https://sh4dcn.vercel.app/md/tour.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://onboarding-tour.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://onboarding-tour.vercel.app/r/registry.json
bunx shadcn@latest add https://onboarding-tour.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/tonghohin/tour.git
# fetch the raw registry index
curl -s https://onboarding-tour.vercel.app/r/registry.json
```

## Components (1)

| name | type | description | install |
| --- | --- | --- | --- |
| tour | registry:ui | A tour component. | `npx shadcn@latest add https://onboarding-tour.vercel.app/r/tour.json` |

## For AI agents

```text
You are adding components from @tour to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tour.md) for the component list.
2. Fetch the machine-readable index: https://onboarding-tour.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tour).
```