When I first started building timelines in React, I struggled with finding a library that was simple, flexible, and looked professional at the same time. After trying a few options, I discovered react-vertical-timeline-component, and it quickly became my go-to choice.
This library makes it really easy to create modern, responsive vertical timelines that work well for showcasing events, resumes, project milestones, or even company histories.
In this tutorial, I’ll walk you through everything I’ve learned while using this library. I’ll cover the installation, the basic setup, and a few practical examples with complete code.
What is react-vertical-timeline-component?
The react-vertical-timeline-component is a lightweight React library that helps you create vertical-only timelines.
Unlike some other libraries, it focuses on doing one thing really well: displaying items in a clean, vertical layout.
It’s perfect if you want to:
- Show a resume timeline (education, jobs, achievements)
- Display project milestones
- Highlight company history or product roadmap
- Build a step-by-step process flow
Method 1 – Install and Set Up the Library
The first step is to install the package from npm. Here’s the command I usually run in my React project:
npm install react-vertical-timeline-component react-iconsI always install react-icons along with it because icons make the timeline look more engaging.
Now, let’s build the most basic timeline.
Example: Basic Timeline Setup
import React from "react";
import {
VerticalTimeline,
VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { FaBriefcase, FaGraduationCap } from "react-icons/fa";
function App() {
return (
<div>
<h1>My Career Journey</h1>
<VerticalTimeline>
<VerticalTimelineElement
className="vertical-timeline-element--education"
contentStyle={{ background: "#f0f0f0", color: "#000" }}
contentArrowStyle={{ borderRight: "7px solid #f0f0f0" }}
date="2010 - 2014"
iconStyle={{ background: "#3e497a", color: "#fff" }}
icon={<FaGraduationCap />}
>
<h3>Bachelor’s Degree</h3>
<p>Studied Computer Science at a U.S. university.</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: "#e9ecef", color: "#000" }}
contentArrowStyle={{ borderRight: "7px solid #e9ecef" }}
date="2015 - 2020"
iconStyle={{ background: "#f76c6c", color: "#fff" }}
icon={<FaBriefcase />}
>
<h3>Software Engineer</h3>
<p>Worked at a tech company in New York, building enterprise apps.</p>
</VerticalTimelineElement>
</VerticalTimeline>
</div>
);
}
export default App;You can see the output in the screenshot below.
This code creates a simple career timeline with two entries: one for education and one for work. The icons and background colors make each event visually distinct.
Method 2 – Add Custom Styles and Colors
One of the things I like most about this library is how easy it is to customize. You can change the background, text color, and even the arrow style.
Example: Custom Styled Timeline
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: "#282c34", color: "#fff" }}
contentArrowStyle={{ borderRight: "7px solid #282c34" }}
date="2021 - Present"
iconStyle={{ background: "#61dafb", color: "#000" }}
icon={<FaBriefcase />}
>
<h3>Senior Developer</h3>
<p>Leading a development team in San Francisco, CA.</p>
</VerticalTimelineElement>You can see the output in the screenshot below.
Here, I applied a dark background with white text for a modern look. The arrow color also matches the content background for consistency.
Method 3 – Use Images and Icons Together
Sometimes text and icons aren’t enough. I’ve found that adding images makes timelines feel more personal.
Example: Timeline with Images
<VerticalTimelineElement
date="2022"
iconStyle={{ background: "#ff9800", color: "#fff" }}
icon={<FaBriefcase />}
>
<h3>Launched New Product</h3>
<img
src="https://via.placeholder.com/400x200"
alt="Product Launch"
style={{ width: "100%", borderRadius: "8px", marginTop: "10px" }}
/>
<p>Released a new SaaS product across the U.S. market.</p>
</VerticalTimelineElement>You can see the output in the screenshot below.
This example shows how you can embed an image inside the timeline element. It’s useful for product launches, events, or even personal photos.
Method 4 – Add Animations
By default, the timeline elements animate into view when you scroll. If you want to disable or control animations, you can use the animate prop.
Example: Disable Animations
<VerticalTimeline animate={false}>
{/* Timeline elements go here */}
</VerticalTimeline>Setting animate={false} gives you a static timeline, which is better for performance on large pages. I usually disable it when embedding timelines in dashboards.
Method 5 – Build a Resume Timeline
One of the best real-world uses of this library is building a resume timeline.
Here’s a complete example:
function ResumeTimeline() {
return (
<VerticalTimeline>
<VerticalTimelineElement
date="2010 - 2014"
iconStyle={{ background: "#3e497a", color: "#fff" }}
icon={<FaGraduationCap />}
>
<h3>Bachelor’s in Computer Science</h3>
<p>University of California, Berkeley</p>
</VerticalTimelineElement>
<VerticalTimelineElement
date="2014 - 2018"
iconStyle={{ background: "#f76c6c", color: "#fff" }}
icon={<FaBriefcase />}
>
<h3>Frontend Developer</h3>
<p>Worked at a startup in Austin, Texas</p>
</VerticalTimelineElement>
<VerticalTimelineElement
date="2018 - Present"
iconStyle={{ background: "#61dafb", color: "#000" }}
icon={<FaBriefcase />}
>
<h3>Senior Engineer</h3>
<p>Currently working at a Fortune 500 company in New York</p>
</VerticalTimelineElement>
</VerticalTimeline>
);
}This example shows a real resume timeline with education and multiple job entries. It’s a great way to make resumes interactive for U.S. job applications.
Tips for Using react-vertical-timeline-component Effectively
Over the years, I’ve learned a few tips that make timelines stand out:
- Use consistent colors for education, work, and personal events
- Add icons to make it easier to distinguish between event types
- Keep text short so the timeline doesn’t look cluttered
- Use images sparingly to highlight key milestones
- Disable animations if performance is a concern
The react-vertical-timeline-component is one of the simplest yet most effective libraries I’ve used in React projects. It doesn’t try to do everything, but it does one thing really well: creating clean, responsive vertical timelines.
Whether you’re building a resume timeline, a project roadmap, or a company history page, this library will save you hours of custom styling.
I’ve personally used it in client projects across the U.S., and it always leaves a professional impression.
You may also read:
- Use componentDidMount in React Functional Components with useEffect
- React Pagination Component Examples
- Ways to Add a React Code Editor Component
- React Component Folder Structure Best Practices
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
