Timeline
A read-only rail of events the app marks
Release Aurora
Release Aurora
- 09:41 (now)Build startedrelease/2.4.0 at 4c1a9fd
- Tests passed412 tests, 0 failures
- Deploying to productionrolling, two regions
- Smoke checksruns when the deploy finishes
cursor=0 current=Build started done=0
Installation
npx shadcn@latest add @sudokw/components-timelineimport { Timeline } from "@gpuixui/components";Usage
import { Timeline, TimelineItem } from "@gpuixui/components";
<Timeline label="Release Aurora">
<TimelineItem status="complete" timestamp="09:41" title="Build started" />
<TimelineItem
description="412 tests, 0 failures"
status="complete"
timestamp="09:44"
title="Tests passed"
/>
<TimelineItem status="current" timestamp="09:52" title="Deploying" />
<TimelineItem status="upcoming" title="Smoke checks" />
</Timeline>;Composition
Timeline
└── TimelineItemAPI reference
Timeline
| Prop | Type | Default | Consequence |
|---|---|---|---|
label | string | none | the list's accessible name (aria-label) |
children | ReactNode | — | TimelineItem parts, passed directly |
style | StyleDesc | — | merged last |
className | string | — | compiled through @gpuixui/tw, joined after the recipe |
testId | string | — | stable locator |
TimelineItem
| Prop | Type | Default | Consequence |
|---|---|---|---|
title | string | — | the event's name and its accessible name |
description | string | none | one line of support copy under the title |
timestamp | string | none | when it happened, as the consumer formats it |
status | "complete" | "current" | "upcoming" | "complete" | the dot's fill, and whether the title is muted |
style | StateStyle<TimelineItemState> | — | resolved against { status, last }, merged last |
className | string | — | joined after the recipe, so it wins conflicts |
testId | string | — | stable locator |
Edit this page on GitHubapps/docs/content/docs/components/timeline.mdx