Order #4821
Tracking
- 09:12Order placed3 items
- 09:13Payment confirmedVisa ending 4242
- 14:40ShippedLeft the warehouse
- TodayOut for deliveryArriving by 6 pm
Click the last, hollow dot to finish it. The dots joined by one line down the side are a Timeline
Timeline
/ <Timeline> · <ol> /
also called vertical timeline, activity timeline, activity feed, event history, changelog timeline, history log
“Vertical lines connecting like a change log does” is a Timeline: a list of events in the order they happened, each marked by a dot, with a connector line running from dot to dot and a timestamp beside each one. Order tracking, activity feeds, changelogs and company histories all use it. It looks like vertical Steps but means the opposite: Steps shows stages you still have to get through, a Timeline records what already happened, plus at most one event still in progress. The draggable bar under a video is a different thing called a scrubber (its moving marker is the playhead), and a schedule laid out by hour is a calendar or timetable.
If you called it…
…you meant a timeline.
Anatomy — every part, named
- 1Timeline dot
<TimelineDot />“The little circle next to each event” is the timeline dot (Chakra: Timeline.Indicator; Ant Design: the item's icon). Solid means it happened.
- 2Timeline connector
<TimelineConnector />“The line running down between the dots” is the timeline connector: one segment per event, from its dot to the next, ending at the last dot.
- 3Opposite content
<TimelineOppositeContent>“The time on the other side of the line” is the opposite content: whatever sits across the line from the event, nearly always its timestamp.
- 4In-progress item
loading: true“The last dot that is still spinning or hollow” is the in-progress item: the one event that has not finished (Ant Design: the item's loading flag).
Prompt — paste into your agent
Build a vertical Timeline (Material UI Timeline from @mui/lab, Ant Design Timeline items) as an <ol> of events in chronological order. Each item gets a TimelineDot joined to the next by a TimelineConnector, the event title and detail as TimelineContent on one side, and its time in a <time datetime> element as TimelineOppositeContent on the other. Finished events use a solid dot, the event still in progress uses Ant Design's item loading state, and the connector stops at the last dot instead of trailing past it.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my Timeline (TimelineDot, TimelineConnector, TimelineOppositeContent, Ant Design items with mode and loading). Rule out: the connector drawn as one tall line behind the whole list, so it overshoots the last dot or stops short when an item wraps to two lines (each item should own the segment below its dot); dots and connector on different horizontal centers, off by a pixel because one uses a border and the other a width; the opposite-content column with no fixed width, so timestamps of different lengths push the line out of vertical alignment; deprecated Ant Design props still in use (dot, label, children, position, pending are replaced by icon, title, content, placement, loading); mode="left" or "right" where the current values are "start" and "end"; events built as divs with no list semantics, so a screen reader hears no order or count; dates as bare text with no <time datetime>; newest-first order done with CSS flex reversal, which flips the visual order but not the reading order; @mui/lab missing because Timeline is not in @mui/material. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Material UI | <Timeline> | ships in @mui/lab, not core; position="alternate" zigzags the events across the line |
| HTML | <ol> | the events have real order, so an ordered list is the honest markup |
| Ant Design | <Timeline items={items} /> | mode is "start", "alternate" or "end"; each item takes title, content, icon, color, loading |
| Chakra UI | <Timeline.Root> | compound parts: Timeline.Item, Timeline.Connector, Timeline.Separator, Timeline.Indicator, Timeline.Content, Timeline.Title |
| HTML | <time datetime="2026-09-20"> | the machine-readable date behind each human-readable timestamp |
| Material UI | <TimelineOppositeContent> | whatever sits on the other side of the line, usually the time; TimelineDot and TimelineConnector are the dot and the line |