ComponentsOverlays & feedback

Tour

A guided product tour: dims the page, cuts a spotlight around each target and anchors a step card to it. Back, Next and Done; arrow keys between steps; Escape or the close button skips. Steps without a target show centred — for a welcome or a closing note.

Radix Popover (modal) · virtual anchor components/tour.tsxtheme · material · accent · density · font

Kiln & Linen

Revenue today

₺84,210

Orders

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Tour } from "@vamos-ui/react";

<Tour open={open} onOpenChange={setOpen} onComplete={markSeen} steps={[
  { target: "[data-tour=search]", title: "Find anything", description: "Orders, customers and products." },
  { target: newButtonRef, title: "Create", description: "Start new records here.", side: "left" },
]} />

The highlighted element gets data-tour-active while its step is showing — style it if you want (raise it, pulse it).

Off-screen targets scroll into view; the spotlight follows layout shifts and scrolling.

Under reduced motion the spotlight jumps instead of gliding.

Examples

Welcome and closing steps (ops)

No target → centred card over the dimmed page; content holds a small illustration.

Unassigned

En route

On site

Controlled (product form)

step / onStepChange to sync with the URL or analytics; onComplete and onSkip tell you how it ended.

Product name

Price (₺)

Step 1

API

Tour

Prop	Type	Default
`steps` { id?, target?, title, description?, content?, side?, align?, padding?, radius? }.	`TourStep[]`	`—`
`open / defaultOpen / onOpenChange` Visibility (controlled or not).	`boolean`	`—`
`step / defaultStep / onStepChange` Current step index.	`number`	`—`
`onComplete` Done on the last step. Persist it so the tour does not come back.	`() => void`	`—`
`onSkip` Closed early with Escape or the close button.	`(index) => void`	`—`
`dismissible` Clicking the dimmed page closes the tour.	`boolean`	`false`
`className` Step card class (width).	`string`	`—`
`labels` Dictionary namespace "tour": next, back, done, skip, progress ("Step {current} of {total}").	`Partial<TourLabels>`	`—`

TourStep

Prop	Type	Default
`target` CSS selector, ref or function. Missing → centred card, no spotlight.	`string \| RefObject<Element> \| () => Element \| null`	`—`
`title / description / content` Card heading (accessible name), description (accessible description) and extra body.	`ReactNode`	`—`
`side / align` Card placement; flips when it does not fit.	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "center"`
`padding / radius` Spotlight padding and corner radius in px.	`number`	`6 / 10`

Top bar

Tree select