更新日誌時間軸

垂直時間軸呈現產品版本歷程，每則發佈包含版本號徽章、日期、標題與變更列表，變更依 new／fix／improve 類型套用色籤，捲動進入視窗時逐項 stagger 進場，最新版本節點帶擴散光暈。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

主標題heading

副標題subheading

<ChangelogTimelineSection />

安裝

npx shadcn@latest add https://webberui.com/r/changelog-timeline-section.json

或在 components.json 設定 registries 後，改用 @webberui/changelog-timeline-section 安裝。

安裝依賴後，從 registry JSON（/r/changelog-timeline-section.json 的 files[0].content）複製 changelog-timeline-section.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import { ChangelogTimelineSection } from "@/components/ui/changelog-timeline-section";

<ChangelogTimelineSection
  heading="更新日誌"
  subheading="所有新功能、改進與修復，一目瞭然。"
  releases={[
    {
      version: "v2.4.0",
      date: "2026-07-10",
      title: "AI 摘要與全新儀表板",
      latest: true,
      changes: [
        { type: "new", text: "新增 AI 週報摘要" },
        { type: "improve", text: "看板載入速度提升約 40%" },
        { type: "fix", text: "修復深色模式對比不足的問題" },
      ],
    },
  ]}
/>

Props

ChangelogTimelineSection

Prop	型別	預設值	說明
`releases`	`ChangelogRelease[]`	—	發佈紀錄清單，建議由新到舊排列
`heading`	`string`	`"更新日誌"`	區塊主標題
`subheading`	`string`	—	區塊副標，顯示在主標題下方
`className`	`string`	—	額外樣式，合併後套用到最外層 `<section>`

ChangelogRelease

Prop	型別	預設值	說明
`version`	`string`	—	版本號，顯示為節點旁的徽章
`date`	`string`	—	發佈日期字串
`title`	`string`	—	該版本的標題摘要
`description`	`string`	—	選填補充描述，顯示在標題下方
`changes`	`ChangelogChange[]`	—	變更列表，依序渲染為色籤條目
`latest`	`boolean`	—	是否為最新版本，節點帶光暈並顯示「最新」徽章

ChangelogChange

Prop	型別	預設值	說明
`type`	`"new" \| "fix" \| "improve"`	—	變更類型，決定籤條顏色與圖示
`text`	`string`	—	變更內容的一句話描述

可及性

使用者系統開啟「減少動態效果」時，停用進場位移與最新節點的光暈脈動，內容直接呈現
時間軸以語意化的 <ol> / <li> 結構渲染，發佈日期使用 <time> 元素
裝飾性元素（直線、節點、圖示）皆標記 aria-hidden，不干擾螢幕閱讀器
變更類型以文字標籤（新功能／改進／修復）呈現，不單靠顏色傳達資訊

更新日誌時間軸

On this page