ProductTour

Measured product tour for real data attributes with anchored highlights, focus movement, arrow navigation, dismissal, and completion callbacks.

InterfaceSource ready8 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/product-tour.json
Interactive preview
Interface

Project

Launch queue

01Review responsive layout
02Prepare release notes
03Check production analytics

Install with the CLI

# adds ProductTour to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/product-tour.json

Or install the package

// npm install @uigrids/react-ui
import { ProductTour } from '@uigrids/react-ui'

export default function App() {
  return <ProductTour />
}

Props

PropTypeDefaultDescription
stepsunknownDEFAULT_STEPSConfigures the steps option.
defaultOpenbooleantrueConfigures the default open option.
startLabelstring'Start tour'Configures the start label option.
onStepChangeunknown-Configures the on step change option.
onCompleteunknown-Configures the on complete option.
onDismissunknown-Configures the on dismiss option.
childrenunknown-Content rendered inside the component.
classNamestring''Additional CSS classes for the outer element.