Atelier UI

Search components…

Search components…

Product Tour

Spotlight product tour that highlights targets step by step with keyboard control.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

ProductTourProps

Also accepts all props of Omit<React.ComponentProps<"div">, "children">

PropTypeDefaultDescription
steps* requiredTourStep[]——
open* requiredboolean——
onOpenChange* required(open: boolean) => void——
onFinish() => void——

Install

$ npx shadcn@latest add https://chromotion.dev/r/product-tour.json

More like this