Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To render a vertical timeline in React with the react-vertical-timeline-component package, install it from npm, import VerticalTimeline and VerticalTimelineElement, import the package’s stylesheet, and place one VerticalTimelineElement per event inside a VerticalTimeline wrapper. The package describes itself on npm as “Vertical timeline for React.js.” This guide walks through setup, the props you are most likely to customize, and the points that trip people up.
Confirm you have the right package
Several npm packages have similar names. The package this guide covers is react-vertical-timeline-component. A different library, vertical-timeline-component-react, exposes a Timeline, Events, and Event API. Code written for one will not work with the other, so check the package name in your package.json before copying any example.
Install the package
From the root of your React project, run:
npm i react-vertical-timeline-componentThe npm listing for the package is at https://www.npmjs.com/package/react-vertical-timeline-component. The listing used for this guide shows version 4.0.0 and an MIT license.版本 numbers change, so check the current version on that page before you pin a version or follow version-specific instructions.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBuild a minimal timeline
The component setup needs three things: two component imports, the stylesheet import, and the markup. The stylesheet is the file react-vertical-timeline-component/style.min.css. Without it, the timeline renders as unstyled markup.
#1 Best Overall
import {
VerticalTimeline,
VerticalTimelineElement,
} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
function CareerTimeline() {
return (
<VerticalTimeline>
<VerticalTimelineElement date="2011 - present">
<h3 className="vertical-timeline-element-title">Creative Director</h3>
<h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
<p>Describe the role and the work you did here.</p>
</VerticalTimelineElement>
<VerticalTimelineElement date="2007 - 2011">
<h3 className="vertical-timeline-element-title">Art Director</h3>
<h4 className="vertical-timeline-element-subtitle">New York, NY</h4>
<p>A second entry shows how the timeline alternates sides.</p>
</VerticalTimelineElement>
</VerticalTimeline>
);
}
export default CareerTimeline;The example adapts the usage pattern from the package’s documentation and adds placeholder text and a second entry. Replace the dates and copy with your own content.
Props you are most likely to customize
The package README documents the following props on VerticalTimelineElement. Confirm each one against the README for the version you have installed, because the documentation available online does not always match the latest release.
| Prop | What it controls | Documented default or type |
|---|---|---|
date |
Text shown with the element, as used in the example | String |
position |
Which side of the vertical line the element sits on (left or right) | String, left or right |
style |
Inline style on the element’s outer wrapper | Style object |
contentStyle |
Inline style on the content box (colors, borders, padding) | Style object |
contentArrowStyle |
Inline style on the arrow that points from the content box to the line | Style object |
iconStyle |
Inline style on the circular icon marker | Style object |
icon |
Content rendered inside the icon marker, such as an icon element | React node |
| Class-name hooks | Class names you can target with your own CSS | Check the README for the exact prop names in your version |
| Click handler props | Run code when an element is clicked | Check the README for the exact prop names in your version |
visible |
Whether the element is shown by default even when it is outside the viewport | Boolean, default false |
intersectionObserverProps |
Options passed to the viewport observer that controls animation timing | Default { rootMargin: '0px 0px 40px 0px' } |
Colors and layout
For colors, set contentStyle for the box background and border, contentArrowStyle so the arrow matches the box, and iconStyle for the marker. For side placement, use position on individual elements. The class-name hooks let you style the title and subtitle elements from your own stylesheet, which is usually cleaner than repeating inline styles across many entries.
Icons
The icon prop accepts a React node. Pair it with iconStyle to set the marker’s background color so the icon remains readable.
Visibility and the viewport
The package hides elements until they enter the viewport, which is why the visible prop and intersectionObserverProps matter. Set visible to true on an element if you need it displayed regardless of its position on screen. Leave the default when the scroll-driven behavior suits the page.
The default observer margin, { rootMargin: '0px 0px 40px 0px' }, adds 40 pixels to the bottom of the viewport when deciding whether an element counts as visible. Change it only if your page layout causes elements to appear too late or too early. The package documentation describes these options; it does not promise a particular browser behavior, so test on the layouts your users see.
Using the timeline in Docusaurus
A related question asks whether this timeline can be placed inside a Docusaurus doc page. That question comes from community discussion, not from official package guidance. The package does not document Docusaurus integration. Docusaurus pages written in MDX can import React components, so the usual approach is to create an MDX page, import both components and the stylesheet at the top, and render the timeline in JSX. Confirm the stylesheet loads on the page after your build, because theme CSS can override the package’s styles.
Troubleshooting
- The timeline has no styling. Confirm the line
import 'react-vertical-timeline-component/style.min.css';is present and that the file path matches the package’s folder structure innode_modules. - Entries appear blank or do not animate as expected. Check whether
visibleis set and whetherintersectionObserverPropswas changed from the default. - Props from an online example do not work. Compare the example’s package name with yours. Examples written for
vertical-timeline-component-reactuse a different API. - Your version behaves differently from the docs. The README copy hosted by UNPKG that was reviewed for this guide describes version 3.5.1. Use the README for your installed version to confirm prop names.
Version and license
Pin the version you tested. Run npm ls react-vertical-timeline-component to see what your project installed, and check the npm page before upgrading, since prop names and defaults can change between releases. The package is listed under the MIT license.
Quick Recap
Best Value
“
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
