How do I implement a Timeline?

Build a logistics timeline as an ordered list (newest first): status-colored dots with icons, absolute timestamps, connector that stops at the last item, and a clear active/current node.

← Library → Turn this into a prompt

Content & display

Timeline

Events laid out along a vertical line in time order—logs, shipping, history.

Also known as activity trail · event log line · history track

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Timeline".

Build a logistics timeline as an ordered list (newest first): status-colored dots with icons, <time datetime> absolute timestamps, connector that stops at the last item, and a clear active/current node.

Anatomy:
- dot / node: Status color plus icon—not color alone.
- line / connector: Don’t let the line poke past the last item.
- timestamp: Absolute times beat “3 hours ago” for disputes.
- active node: Often top + emphasized for live tracking.

Preferred API / pattern: `custom ol / timeline components`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Using timeline for a fixed wizard
○Avoid: Oldest-first shipping trail
○Avoid: Status by color only
○Avoid: Connector sticking past the last event

In plain wordsHow people search for it

“the shipping tracker with dots and times down a vertical line”“an activity feed of what happened when”“audit log laid out as a vertical story”

AnatomyOpen for part names

dot / node: Status color plus icon—not color alone.
line / connector: Don’t let the line poke past the last item.
timestamp: Absolute times beat “3 hours ago” for disputes.
active node: Often top + emphasized for live tracking.

How to write itOpen for stack patterns

Web (HTML/CSS)<ol> + CSS pseudo-element line

React + Tailwind + shadcn/uicustom ol / timeline components

SwiftUIVStack of events with a leading rail

Ant Design<Timeline items mode="left|alternate" />

Notes

Steps are a plan; a timeline is a record. Shipping trails often put newest first so “Delivered” isn’t buried. Use <ol> and <time datetime>. Don’t repurpose a timeline for a fixed three-step wizard—that’s Steps.

Common mistakesHumans and models trip here

Using timeline for a fixed wizard: that’s Steps.
Oldest-first shipping trail: users scroll forever to see “Delivered.”
Status by color only: add icons for color-blind users.
Connector sticking past the last event: classic visual bug.

More failure symptoms on AI broke it.

Related patterns

Steps / StepperVisualize a multi-step flow: done, current, and upcoming.Divider / SeparatorA thin rule that is either a real thematic break or pure decoration—know which.BadgeA compact count or status mark attached to an icon, tab, or label.Result PageA full screen that states the final outcome of a heavy action and offers a clear next step.

Spotted a wrong name or missing pattern?

Message on X