EventTimeline

Shell

Read ordered events with elapsed-time labels, expandable property payloads, and session grouping.

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { EventTimeline } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

세션 경계를 보존하는 고객 여정

Mina Park · recovery journey

Selected evidence: Order completed

Times are fixed to 2026-08-27

12m 44s · 4 events

+4 minutes
오전 10:17
Order #R-1842 · ₩128,000
+7 minutes
오전 10:14
Campaign: August onboarding recovery
+2 minutes
오전 10:07
/checkout?cart=cart_5931
오전 10:05
Email · abandoned_cart_v4

Usage guidance

Best practices

Group user history by session so session boundaries remain clear.
Pass event properties through properties so they can be expanded in place.

Usage to avoid

Do not pass thousands of events at once. Split them with pagination or onLoadMore.

EventTimeline

Prop	Type	Default	Description
items	EventTimelineItem[]	—	평면 목록. groups가 있으면 무시된다
groups	EventTimelineGroup[]	—	그룹(주로 세션) 단위 목록. 접기/펼치기와 그룹 요약을 제공
showGaps	boolean	true	인접 이벤트 사이 경과 시간 표시. 체크아웃 직전 4분 정지 같은 것이 발견이 된다
order	"desc" \| "asc"	"desc"	전달된 items의 정렬 방향. 경과 시간 계산 기준
minGapMs	number	1000	이 값 미만의 간격은 라벨을 생략
loading	boolean	false	스켈레톤 표시
hasMore	boolean	false	더 불러올 항목 존재
onLoadMore	() => void	—	더 보기 핸들러
onItemSelect	(item: EventTimelineItem) => void	—	이벤트 헤드라인 클릭 핸들러
locale	string	—	경과 시간 포맷 로케일
labels	EventTimelineLabels	—	문구 오버라이드

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

EventTimeline 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

EventTimeline

Shell

Read ordered events with elapsed-time labels, expandable property payloads, and session grouping.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { EventTimeline } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

세션 경계를 보존하는 고객 여정

Mina Park · recovery journey

Selected evidence: Order completed

Times are fixed to 2026-08-27

12m 44s · 4 events

+4 minutes
오전 10:17
Order #R-1842 · ₩128,000
+7 minutes
오전 10:14
Campaign: August onboarding recovery
+2 minutes
오전 10:07
/checkout?cart=cart_5931
오전 10:05
Email · abandoned_cart_v4

Usage guidance

Best practices

Group user history by session so session boundaries remain clear.
Pass event properties through properties so they can be expanded in place.

Usage to avoid

Do not pass thousands of events at once. Split them with pagination or onLoadMore.

EventTimeline

Prop	Type	Default	Description
items	EventTimelineItem[]	—	평면 목록. groups가 있으면 무시된다
groups	EventTimelineGroup[]	—	그룹(주로 세션) 단위 목록. 접기/펼치기와 그룹 요약을 제공
showGaps	boolean	true	인접 이벤트 사이 경과 시간 표시. 체크아웃 직전 4분 정지 같은 것이 발견이 된다
order	"desc" \| "asc"	"desc"	전달된 items의 정렬 방향. 경과 시간 계산 기준
minGapMs	number	1000	이 값 미만의 간격은 라벨을 생략
loading	boolean	false	스켈레톤 표시
hasMore	boolean	false	더 불러올 항목 존재
onLoadMore	() => void	—	더 보기 핸들러
onItemSelect	(item: EventTimelineItem) => void	—	이벤트 헤드라인 클릭 핸들러
locale	string	—	경과 시간 포맷 로케일
labels	EventTimelineLabels	—	문구 오버라이드