reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
AuditTimeline
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

AuditTimeline

Shell

Review change history with action colors and expandable diffs.

workflow
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { AuditTimeline } from "@reopt-ai/opt-ui";

Live preview

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

100%
생성2026-02-23 10:30Alice

프로젝트 Alpha를 생성했습니다

수정2026-02-23 11:15Bob

배포 설정을 변경했습니다

삭제2026-02-23 14:00Charlie

old-backup 스냅샷을 삭제했습니다

AuditTimeline

PropTypeDefaultDescription
entriesRequiredAuditEntry[]—변경 이력 항목 배열
labelsAuditTimelineLabels—UI 텍스트 커스터마이징
onEntryClick(entry: AuditEntry) => void—항목 클릭 콜백
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▼ USES (3)AuditTimelinebadgebuttonempty-state
View test results

테스트 커버리지

2026년 7월 9일9/9 통과
9성공
0실패
9전체
  • 모든 엔트리를 타임라인에 렌더링한다
  • 액션 타입별 Badge를 표시한다
  • actor와 timestamp를 표시한다
  • changes가 있는 엔트리에 상세 보기 버튼을 표시한다
  • 상세 보기 클릭 시 diff 테이블을 표시한다
  • 빈 entries일 때 EmptyState를 렌더링한다
  • onEntryClick 콜백을 호출한다
  • 클릭 가능한 엔트리 안에 상세 보기 버튼을 중첩하지 않는다
  • 커스텀 labels를 적용한다

Related components

opt-ui

DeploymentTimeline

Shells

Follow deployment stages on a timeline with Composite keyboard navigation.

opt-ui

TaskList

Shells

Manage tasks with priorities, statuses, assignees, tags, and subtasks.

opt-ui

ActivityFeed

Shells

Read activity and logs in a timeline with relative timestamps.

opt-ui

WorkflowCanvas

Shells

Arrange workflow steps on grid cells with SVG connections and keyboard movement.

opt-ui

FeatureFlagPanel

Shells

Manage feature toggles, environment badges, and rollout percentages.

opt-ui

AuditLog

Shells

Read audit events in a timeline with avatars, action text, and metadata badges.

PreviousAuditLogNextChatSidebar