# react-vertical-timeline-component

> Vertical timeline for React.js

Latest version **4.0.0** (published 2026-02-08) · 0 weekly downloads

## Install

```sh
npm install react-vertical-timeline-component
pnpm add react-vertical-timeline-component
yarn add react-vertical-timeline-component
bun add react-vertical-timeline-component
```

## Health

**Score 58/100 (C)** — status: stable.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2026-02-08 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| TypeScript types | separate (@types/react-vertical-timeline-component) |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 48.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stephane-monnot |
| Keywords | react, vertical-timeline, react-vertical-timeline-component, react-19, react-19-support |

## Links

- npm: https://www.npmjs.com/package/react-vertical-timeline-component
- npm.io page: https://npm.io/package/react-vertical-timeline-component

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [react-intersection-observer](https://npm.io/package/react-intersection-observer.md) ^9.5.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2026-02-08
- 3.5.3 — 2024-12-11
- 3.6.0 — 2022-12-06
- 3.5.2 — 2021-10-21
- 3.5.1 — 2021-10-21
- 3.5.0 — 2021-10-21
- 3.4.1 — 2021-10-21
- 3.4.0 — 2021-10-21
- 3.3.3 — 2021-01-28
- 3.3.2 — 2021-01-28
- 3.3.1 — 2020-10-26
- 3.3.0 — 2020-10-12
- 3.2.0 — 2020-10-09
- 3.1.3 — 2020-10-09
- 3.1.2 — 2020-10-09
- … 37 more at https://npm.io/package/react-vertical-timeline-component/versions

## README

![React 19 Supported](https://img.shields.io/badge/React-19-blue.svg?style=flat-square&logo=react)

[![build status](https://secure.travis-ci.org/stephane-monnot/react-vertical-timeline.svg)](http://travis-ci.org/stephane-monnot/react-vertical-timeline) [![Dependency Status](https://david-dm.org/stephane-monnot/react-vertical-timeline.svg)](https://david-dm.org/stephane-monnot/react-vertical-timeline)

# react-vertical-timeline-component - Vertical timeline for React.js
![alt tag](https://i.imgur.com/X7Tefzr.gif)

## Full documentation & Demo

[React Vertical Timeline documentation](https://stephane-monnot.github.io/react-vertical-timeline/)


## Install

```code
$ npm i react-vertical-timeline-component
```


## Usage

```code|lang-jsx
---
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

...

<VerticalTimeline>
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
    date="2011 - present"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title">Creative Director</h3>
    <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
    <p>
      Creative Direction, User Experience, Visual Design, Project Management, Team Leading
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    date="2010 - 2011"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title">Art Director</h3>
    <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
    <p>
      Creative Direction, User Experience, Visual Design, SEO, Online Marketing
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    date="2008 - 2010"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title">Web Designer</h3>
    <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
    <p>
      User Experience, Visual Design
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    date="2006 - 2008"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    icon={<WorkIcon />}
  >
    <h3 className="vertical-timeline-element-title">Web Designer</h3>
    <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
    <p>
      User Experience, Visual Design
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--education"
    date="April 2013"
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
    icon={<SchoolIcon />}
  >
    <h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
    <h4 className="vertical-timeline-element-subtitle">Online Course</h4>
    <p>
      Strategy, Social Media
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--education"
    date="November 2012"
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
    icon={<SchoolIcon />}
  >
    <h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
    <h4 className="vertical-timeline-element-subtitle">Certification</h4>
    <p>
      Creative Direction, User Experience, Visual Design
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    className="vertical-timeline-element--education"
    date="2002 - 2006"
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
    icon={<SchoolIcon />}
  >
    <h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
    <h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
    <p>
      Creative Direction, Visual Design
    </p>
  </VerticalTimelineElement>
  <VerticalTimelineElement
    iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
    icon={<StarIcon />}
  />
</VerticalTimeline>
```


## VerticalTimeline Props

### `animate={ Boolean }`

Enable or disable animations on elements (default: true).

### `className={ String }`

Add extra class name to root div element.

### `layout={ String }`

Choose if you want `'1-column-left'` or `'1-column-right'` or `'2-columns'` (default: `'2-columns'`).

### `lineColor={ String }`

Choose a color for the timeline (default: `'white'`).

## VerticalTimelineElement Props

### `className={ String }`

Add extra class name to root div element.

### `contentArrowStyle={ Object }`

Add extra style to content arrow div element.

### `contentStyle={ Object }`

Add extra style to content div element.

### `date={ String }`

Date of the element.

### `dateClassName={ String }`

Add extra class name to the element's date.

### `icon={ String }`

Icon of the element.

### `iconClassName={ String }`

Add extra class name to the element's icon.

### `shadowSize={ String }`

Shadow size for icon (default: `'small'`). Available sizes are `'small'`, `'medium'` and `'large'`.

### `iconOnClick={ Function }`

onClick handler of the element's icon.

### `onTimelineElementClick={ Function }`

onClick handler of the vertical timeline element's div.

### `iconStyle={ Object }`

Style of the element's icon.

### `position={ String }`

Position of the element (left or right).

### `style={ Object }`

Add extra style to root div element.

### `textClassName={ String }`

Add extra class name to the text container.

### `intersectionObserverProps={ Object }`

Custom props pass to `useInView` component (default: { rootMargin: '0px 0px 40px 0px' }).
*See [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) for more information.*

### `visible={ Boolean }`

Show element by default even if it is outside of the viewport (default: false).


## Showcase

* [My resume (Stéphane Monnot)](https://stephanemonnot.com/).


## For development
### Launch the Demo

```code
$ npm start
```

### Run the tests
```code
$ npm test
```

### Watch and Run the tests
```code
$ npm test -- --watch
```

### Run lint
```code
$ npm run lint
```
### Build the library
```code
$ npm run dist
```


### Publish new version (only for maintainers)
```code
$ npm publish
```

## License

*react-vertical-timeline-component* is available under MIT. See LICENSE for more details.

---
_Source: https://npm.io/package/react-vertical-timeline-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._