Product Tour

产品导览：聚光灯高亮目标元素，逐步展示说明，支持键盘前进后退。

#onboarding #tour #spotlight

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

ProductTourProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"div">, "children">

属性	类型	默认值	说明
steps* 必填	`TourStep[]`	—	—
open* 必填	`boolean`	—	—
onOpenChange* 必填	`(open: boolean) => void`	—	—
onFinish	`() => void`	—	—

安装

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

同类组件

Speed Dial

浮层与反馈

悬浮按钮展开为带标签的快捷操作菜单，支持错落动画与键盘操作。

Confirm Popover

浮层与反馈

包裹任意触发器的小型确认气泡，支持危险样式与异步确认。

Share Dialog

浮层与反馈

带复制链接、邮箱邀请、访问权限和成员角色的分享弹窗。