📄 primereact/timeline
File: timeline.md | Updated: 11/15/2025
Source: https://primereact.org/timeline/
Introducing PrimeReact v11 Alpha 🥁Learn More
-
SearchK
-
10.9.7
-
FEATURES
-
API
-
THEMING
-
PASS THROUGH
Timeline
Timeline visualizes a series of chained events.
Import#
import { Timeline } from 'primereact/timeline';
Copy
Basic#
Timeline requires a value for the collection of events and content function that receives an object as a parameter to return content.
Ordered
Processing
Shipped
Delivered
<Timeline value={events} content={(item) => item.status} />
Copy
Alignment#
Content location relative the line is defined with the align property.
Ordered
Processing
Shipped
Delivered
Ordered
Processing
Shipped
Delivered
Ordered
Processing
Shipped
Delivered
<Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
<Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
<Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
Copy
Opposite#
Additional content at the other side of the line can be provided with the opposite property.
Ordered
15/10/2020 10:30
Processing
15/10/2020 14:00
Shipped
15/10/2020 16:15
Delivered
16/10/2020 10:00
<Timeline value={events} opposite={(item) => item.status}
content={(item) => <small className="text-color-secondary">{item.date}</small>} />
Copy
Template#
Sample implementation with custom content and styled markers.
Ordered
15/10/2020 10:30
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Read more
Processing
15/10/2020 14:00
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Read more
Shipped
15/10/2020 16:15
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Read more
Delivered
16/10/2020 10:00
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
Read more
<Timeline value={events} align="alternate" className="customized-timeline"
marker={customizedMarker} content={customizedContent} />
Copy
Horizontal#
TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.
2020
2021
2022
2023
2020
2021
2022
2023
2020
2021
2022
2023
<Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
<Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
<Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span> </span>} />
Copy
Accessibility#
Screen Reader
Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.
Keyboard Support
Component does not include any interactive elements.
-
Import
-
Basic
-
Alignment
-
Opposite
-
Template
-
Horizontal
-
Accessibility
PrimeReact 10.9.7 by PrimeTek