Product Tour

Motion

A React product tour with a clickable list of steps beside a detail panel that fades in for the active step, plus back and next buttons that stop at the ends.

src/registry/premium/product-tour.tsx/r/product-tour.json

Installation#

bash
npx shadcn@latest add @minidev/product-tour

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/product-tour.json

Usage#

tsx
import { ProductTour } from "@/components/ui/product-tour"

export function Example() {
  return (
    <ProductTour steps={[
      { title: "Install free kit", body: "Add Hairline primitives from the registry." },
      { title: "Compose product UI", body: "Dashboards, AI, billing — all free." },
      { title: "Drop Premium moments", body: "Heroes and templates when launch needs wow." },
    ]} />
  )
}

API reference#

ProductTour props
PropTypeDefault
stepsTourStep[]SAMPLE_STEPS
classNamestring-

Dependencies#

npm

motion

Built from

Examples#

All Landing page sections for React and Tailwind

Learn more