Feedback

Tour

Step-by-step onboarding guide that spotlights specific elements with a popover and mask overlay.

Step 2 target element

Installation

npx benflux-ui add tour

Usage

import { Tour, type TourStep } from "@benflux-ui/react"

const buttonRef = useRef<HTMLButtonElement>(null)

const steps: TourStep[] = [
  {
    title: "Step 1",
    description: "Click this button to proceed.",
    target: () => buttonRef.current,
    placement: "bottom",  // "top" | "bottom" | "left" | "right" | "center"
  },
  {
    title: "Done",
    description: "You've completed the tour!",
  },
]

<Button ref={buttonRef}>Action</Button>
<Tour open={open} onClose={() => setOpen(false)} steps={steps} />

Props — Tour

Prop	Type	Default	Description
open*	boolean	—	Controls visibility of the tour
onClose*	() => void	—	Called when the tour is dismissed
steps*	TourStep[]	—	Array of step definitions
current	number	0	Controlled current step index
onChange	(current: number) => void	—	Called when the step changes

Props — TourStep

Prop	Type	Default	Description
title*	ReactNode	—	Step title
description	ReactNode	—	Step body text
target	() => Element \| null	—	Ref getter pointing to the element to highlight
placement	"top" \| "bottom" \| "left" \| "right" \| "center"	"bottom"	Popover placement relative to the target