ホーム/コンポーネント/データ表示/タイムライン Timeline

Timeline

時系列のイベントを表示するタイムラインコンポーネント。CRMの活動履歴などに最適。

import { Timeline } from "@blueai/ui"

Examples

Activity timeline

契約を更新しました

10分前

メモを追加しました

1時間前

次回ミーティングの議題を確認

ステータスを変更しました

昨日

商談中 → 成約

<Timeline items={[
  { key: "1", title: "契約を更新しました", time: "10分前", iconColor: "bg-green-50" },
  { key: "2", title: "メモを追加しました", description: "次回ミーティングの議題を確認", time: "1時間前", iconColor: "bg-blue-50" },
  { key: "3", title: "ステータスを変更しました", description: "商談中 → 成約", time: "昨日" },
]} />

Props

Prop	Type	Default	Description
items*	TimelineItem[]	—	タイムラインアイテムの配列

Types

TimelineItem

type TimelineItem = {
  key: string;
  icon?: ReactNode;
  iconColor?: string;    // bg-blue-50 など
  title: ReactNode;
  description?: ReactNode;
  time?: string;
};