Onboarding Checklist

新手清单：进度条、可展开步骤、行内操作按钮，全部完成后切换为庆祝状态。

#onboarding #checklist #progress

在沙盒中编辑

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

属性

OnboardingChecklistProps

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

属性	类型	默认值	说明
title	`string`	`"Get started"`	—
items* 必填	`ChecklistItem[]`	—	—
defaultCompleted	`string[]`	`[]`	—
onCompletedChange	`(completed: string[]) => void`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/onboarding-checklist.json

同类组件

Comment Thread

评论串：多级回复、点赞、内联回复框，新评论即时插入。

Chat Messages

聊天消息：按发送者分组的气泡、已发送/已读回执、输入中动画，自动滚动到底部。

Profile Card

个人资料卡：渐变封面、头像、认证标记、标签、统计与关注按钮。