Product tourPro
A guided tour: a spotlight glides between elements with an explaining card.
Search
When to use
- First-run onboarding and new-feature walkthroughs.
When not to use
- Explaining everything: keep tours to 3–5 steps.
Installation
Usage
Import it from @/components/ui/product-tour after installing.
example.tsx
import { ProductTour } from "@/components/ui/product-tour";
<ProductTour open={open} onOpenChange={setOpen} steps={[
{ target: "#search", title: "Find anything", body: "Search projects and people." },
{ target: "#new", title: "Create", body: "Start a project in one click." },
]} />API reference
ProductTour
A dimmed overlay with a spotlight on each target and a step card.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { target; title; body; side? }[] | – | target is a CSS selector. |
| open / onOpenChange | boolean | – | Controlled visibility. |
| onFinish | () => void | – | After the last step. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Previous or next step |
| Esc | Skip the tour |
| Tab | Reach Back, Next and Skip |
Accessibility
- The card is a labelled modal dialog that takes focus and returns it when done.
- Step count is part of the content.
Motion
- The spotlight and card glide to each new target; content swaps with a short slide; target scrolls into view (instantly under reduced motion).
Responsive behavior
- The card stays inside the viewport.
Performance
- Measures only on step change, resize and scroll.
Notes for AI
- Store completion so the tour doesn't reappear.
This page as Markdown, for assistants and coding agents:
/components/product-tour/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt