安装

你需要一个已配置好 shadcn/ui 的项目。如果从零开始：

npx shadcn@latest init

1. 添加注册表

把 goodui 添加到 components.json 的 registries 字段：

components.json

{
  "registries": {
    "@goodui": "https://goodui.dev/r/{name}.json"
  }
}

npx shadcn@latest add @goodui/resource-timeline

CLI 会安装区块、它用到的 shadcn 组件以及所需的 npm 包。你也可以在终端里搜索注册表：

npx shadcn@latest search @goodui
npx shadcn@latest view @goodui/kpi-cards

每个免费区块也可以通过完整 URL 安装：

npx shadcn@latest add https://goodui.dev/r/resource-timeline.json

app/schedule/page.tsx

import ResourceTimeline from "@/components/goodui/resource-timeline"

export default function Page() {
  return <ResourceTimeline />
}

区块是客户端组件，演示数据就在文件顶部。把它换成你的数据即可。