React Vertical Timeline Component

https://github.com/stephane-monnot/react-vertical-timeline
Admin
A React component library for creating customizable vertical timeline visualizations with support...
Tokens:8,204
Snippets:37
Trust Score:8
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start the Demo

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Use this command to launch the demo application for development purposes. Ensure you have npm installed.

```bash
$ npm start
```

--------------------------------

### Installation

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Install the react-vertical-timeline-component using npm.

```APIDOC
## Install

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

--------------------------------

### Usage Example

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Demonstrates how to use the VerticalTimeline and VerticalTimelineElement components to create a timeline.

```APIDOC
## Usage

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

// Assuming WorkIcon, SchoolIcon, StarIcon are defined elsewhere

<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>
```
```

--------------------------------

### Install react-vertical-timeline-component

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Install the library using npm. This command adds the package to your project's dependencies.

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

--------------------------------

### Implement a Professional Work History Timeline

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

A complete example demonstrating the use of VerticalTimeline and VerticalTimelineElement components with custom styling, icons, and event handling.

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

// Icon components (can use any icon library or custom components)
const WorkIcon = () => <span style={{ fontSize: '24px' }}>💼</span>;
const SchoolIcon = () => <span style={{ fontSize: '24px' }}>🎓</span>;
const CertIcon = () => <span style={{ fontSize: '24px' }}>📜</span>;
const StarIcon = () => <span style={{ fontSize: '24px' }}>⭐</span>;

function ProfessionalTimeline() {
  const handleElementClick = (title) => {
    console.log(`Clicked: ${title}`);
  };

  return (
    <div style={{ background: '#f5f5f5', padding: '20px 0' }}>
      <VerticalTimeline lineColor="#3e497a">
        {/* Current Position - highlighted with custom styling */}
        <VerticalTimelineElement
          className="vertical-timeline-element--work"
          contentStyle={{ background: '#3e497a', color: '#fff' }}
          contentArrowStyle={{ borderRight: '7px solid #3e497a' }}
          date="2022 - present"
          iconStyle={{ background: '#3e497a', color: '#fff' }}
          icon={<WorkIcon />}
          shadowSize="large"
          onTimelineElementClick={() => handleElementClick('Lead Developer')}
        >
          <h3 className="vertical-timeline-element-title">Lead Developer</h3>
          <h4 className="vertical-timeline-element-subtitle">Tech Corp, NYC</h4>
          <p>
            Leading a team of 8 developers. Architecture design, code reviews,
            mentoring junior developers, and implementing CI/CD pipelines.
          </p>
        </VerticalTimelineElement>

        {/* Previous Position */}
        <VerticalTimelineElement
          className="vertical-timeline-element--work"
          date="2019 - 2022"
          iconStyle={{ background: '#21a3d3', color: '#fff' }}
          icon={<WorkIcon />}
          shadowSize="medium"
        >
          <h3 className="vertical-timeline-element-title">Senior Developer</h3>
          <h4 className="vertical-timeline-element-subtitle">StartupXYZ, Boston</h4>
          <p>
            Full-stack development with React and Node.js. Built real-time
            collaboration features and optimized database performance.
          </p>
        </VerticalTimelineElement>

        {/* Certification */}
        <VerticalTimelineElement
          className="vertical-timeline-element--education"
          date="March 2021"
          iconStyle={{ background: '#ff9f1c', color: '#fff' }}
          icon={<CertIcon />}
          position="right"
        >
          <h3 className="vertical-timeline-element-title">AWS Solutions Architect</h3>
          <h4 className="vertical-timeline-element-subtitle">Professional Certification</h4>
          <p>Cloud architecture, serverless computing, infrastructure as code</p>
        </VerticalTimelineElement>

        {/* Education */}
        <VerticalTimelineElement
          className="vertical-timeline-element--education"
          date="2015 - 2019"
          iconStyle={{ background: '#e63946', color: '#fff' }}
          icon={<SchoolIcon />}
        >
          <h3 className="vertical-timeline-element-title">B.S. Computer Science</h3>
          <h4 className="vertical-timeline-element-subtitle">State University</h4>
          <p>
            GPA: 3.8/4.0. Focus on software engineering and distributed systems.
            Senior thesis on microservices architecture patterns.
          </p>
        </VerticalTimelineElement>

        {/* Timeline End Marker */}
        <VerticalTimelineElement
          iconStyle={{ background: '#2ec4b6', color: '#fff' }}
          icon={<StarIcon />}
        />
      </VerticalTimeline>
    </div>
  );
}

export default ProfessionalTimeline;
```

--------------------------------

### VerticalTimeline Component Examples

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Configure the main VerticalTimeline container for different layouts and animations. Ensure 'react-vertical-timeline-component/style.min.css' is imported for default styling.

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

// Two-column layout (default) with custom line color and animations
<VerticalTimeline
  animate={true}
  layout="2-columns"
  lineColor="#3e497a"
  className="my-custom-timeline"
>
  {/* VerticalTimelineElement children go here */}
</VerticalTimeline>

// Single-column left-aligned layout
<VerticalTimeline layout="1-column-left" lineColor="#e74c3c">
  {/* Timeline elements */}
</VerticalTimeline>

// Single-column right-aligned layout without animations
<VerticalTimeline layout="1-column-right" animate={false}>
  {/* Timeline elements */}
</VerticalTimeline>
```

--------------------------------

### VerticalTimelineElement Component Examples

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Create individual events on the timeline using VerticalTimelineElement. Customize content, icons, dates, and styles. Import necessary Material-UI icons if used.

```jsx
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import WorkIcon from '@mui/icons-material/Work';
import SchoolIcon from '@mui/icons-material/School';
import StarIcon from '@mui/icons-material/Star';

<VerticalTimeline>
  {/* Fully styled work experience element */}
  <VerticalTimelineElement
    className="vertical-timeline-element--work"
    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    contentArrowStyle={{ borderRight: '7px solid rgb(33, 150, 243)' }}
    date="2020 - present"
    dateClassName="custom-date-class"
    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
    icon={<WorkIcon />}
    iconClassName="work-icon"
    shadowSize="medium"
    onTimelineElementClick={() => console.log('Element clicked')}
    iconOnClick={() => console.log('Icon clicked')}
  >
    <h3 className="vertical-timeline-element-title">Senior Developer</h3>
    <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
    <p>
      Full-stack development, System Architecture, Team Leadership
    </p>
  </VerticalTimelineElement>

  {/* Education element with different styling */}
  <VerticalTimelineElement
    className="vertical-timeline-element--education"
    date="2016 - 2020"
    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
    icon={<SchoolIcon />}
    position="left"
    visible={true}
  >
    <h3 className="vertical-timeline-element-title">Computer Science Degree</h3>
    <h4 className="vertical-timeline-element-subtitle">MIT</h4>
    <p>Algorithms, Data Structures, Machine Learning</p>
  </VerticalTimelineElement>

  {/* Icon-only element (no children) for timeline endpoints */}
  <VerticalTimelineElement
    iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
    icon={<StarIcon />}
  />
</VerticalTimeline>
```

--------------------------------

### Build the Library

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Compile the library into distributable formats. This command is typically used before publishing or for production builds.

```bash
$ npm run dist
```

--------------------------------

### Development Commands

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Standard CLI commands for developing, testing, and building the library.

```APIDOC
## Development Commands

- **npm start**: Launch the demo.
- **npm test**: Run the tests.
- **npm test -- --watch**: Watch and run the tests.
- **npm run lint**: Run linting.
- **npm run dist**: Build the library.
- **npm publish**: Publish new version (maintainers only).
```

--------------------------------

### Basic Usage of Vertical Timeline

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Demonstrates how to use VerticalTimeline and VerticalTimelineElement components to create a timeline. Ensure to import the necessary components and CSS.

```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>
```

--------------------------------

### Run Tests

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Execute the test suite for the project. This command runs all defined tests.

```bash
$ npm test
```

--------------------------------

### Run Lint

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Check the code for stylistic errors and potential issues using the configured linter.

```bash
$ npm run lint
```

--------------------------------

### Publish New Version

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Publish a new version of the library to the npm registry. This command is restricted to maintainers.

```bash
$ npm publish
```

--------------------------------

### Watch and Run Tests

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Continuously run the test suite as you make code changes. This is useful for a TDD workflow.

```bash
$ npm test -- --watch
```

--------------------------------

### VerticalTimelineElement Props Reference

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Reference for all available props for the VerticalTimelineElement component, detailing their types, default values, and descriptions.

```APIDOC
## VerticalTimelineElement Props Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | Node | `''` | Content inside the element card |
| `className` | String | `''` | Additional CSS class for root element |
| `contentStyle` | Object | `null` | Inline styles for the content card |
| `contentArrowStyle` | Object | `null` | Inline styles for the content arrow |
| `date` | String/Node | `''` | Date text displayed alongside the element |
| `dateClassName` | String | `''` | CSS class for the date element |
| `icon` | Element | `null` | React element to display as the icon |
| `iconClassName` | String | `''` | CSS class for the icon container |
| `iconStyle` | Object | `null` | Inline styles for the icon |
| `iconOnClick` | Function | `null` | Click handler for the icon |
| `onTimelineElementClick` | Function | `null` | Click handler for the content card |
| `id` | String | `''` | HTML id attribute for the element |
| `position` | String | `''` | Force position: `'left'` or `'right'` |
| `style` | Object | `null` | Inline styles for the root element |
| `textClassName` | String | `''` | CSS class for the text container |
| `shadowSize` | String | `'small'` | Icon shadow size: `'small'`, `'medium'`, or `'large'` |
| `visible` | Boolean | `false` | Show element immediately without scroll animation |
| `intersectionObserverProps` | Object | `{ rootMargin: '0px 0px -40px 0px', triggerOnce: true }` | Custom props for react-intersection-observer |
```

--------------------------------

### Custom Intersection Observer Configuration

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Demonstrates how to use `intersectionObserverProps` to customize the animation trigger behavior for timeline elements.

```APIDOC
## Custom Intersection Observer Configuration

The `intersectionObserverProps` allows fine-grained control over when animations trigger. This is useful for adjusting animation timing based on your specific layout requirements.

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

<VerticalTimeline>
  {/* Element with custom intersection observer settings */}
  <VerticalTimelineElement
    date="2023"
    iconStyle={{ background: '#6a4c93', color: '#fff' }}
    icon={<span>1</span>}
    intersectionObserverProps={{
      rootMargin: '0px 0px -100px 0px',  // Trigger earlier (100px before element enters)
      triggerOnce: true,                  // Only animate once
      threshold: 0.25                     // Trigger when 25% visible
    }}
  >
    <h3>Early Trigger Element</h3>
    <p>This element animates when it's 100px from entering the viewport.</p>
  </VerticalTimelineElement>

  {/* Element that re-animates on every scroll */}
  <VerticalTimelineElement
    date="2022"
    iconStyle={{ background: '#1982c4', color: '#fff' }}
    icon={<span>2</span>}
    intersectionObserverProps={{
      rootMargin: '0px 0px 0px 0px',
      triggerOnce: false,                 // Re-animate every time element enters view
      threshold: 0.5
    }}
  >
    <h3>Re-animating Element</h3>
    <p>This element bounces in every time you scroll past it.</p>
  </VerticalTimelineElement>

  {/* Always visible element (no scroll animation) */}
  <VerticalTimelineElement
    date="2021"
    iconStyle={{ background: '#8ac926', color: '#fff' }}
    icon={<span>3</span>}
    visible={true}
  >
    <h3>Always Visible</h3>
    <p>This element is visible immediately without waiting for scroll.</p>
  </VerticalTimelineElement>
</VerticalTimeline>
```
```

--------------------------------

### VerticalTimelineElement Props

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Configuration properties for customizing the appearance and behavior of timeline elements.

```APIDOC
## VerticalTimelineElement Props

### Parameters
- **contentStyle** (Object) - Optional - Extra style for the content div element.
- **date** (String) - Optional - Date of the element.
- **dateClassName** (String) - Optional - Extra class name for the element's date.
- **icon** (String) - Optional - Icon of the element.
- **iconClassName** (String) - Optional - Extra class name for the element's icon.
- **shadowSize** (String) - Optional - Shadow size for icon ('small', 'medium', 'large'). Default: 'small'.
- **iconOnClick** (Function) - Optional - onClick handler for the icon.
- **onTimelineElementClick** (Function) - Optional - onClick handler for the element's div.
- **iconStyle** (Object) - Optional - Style of the element's icon.
- **position** (String) - Optional - Position of the element ('left' or 'right').
- **style** (Object) - Optional - Extra style for the root div element.
- **textClassName** (String) - Optional - Extra class name for the text container.
- **intersectionObserverProps** (Object) - Optional - Custom props for useInView. Default: { rootMargin: '0px 0px 40px 0px' }.
- **visible** (Boolean) - Optional - Show element by default if outside viewport. Default: false.
```

--------------------------------

### Implement Single Column Timelines in React

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Use the VerticalTimeline component with the layout prop set to '1-column-left' or '1-column-right'. Ensure the component stylesheet is imported for proper rendering.

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

// Left-aligned single column (ideal for sidebars)
function LeftAlignedTimeline() {
  return (
    <VerticalTimeline layout="1-column-left" lineColor="#667eea">
      <VerticalTimelineElement
        date="Step 1"
        iconStyle={{ background: '#667eea', color: '#fff' }}
        icon={<span>1</span>}
      >
        <h3>Account Setup</h3>
        <p>Create your account and verify your email address.</p>
      </VerticalTimelineElement>

      <VerticalTimelineElement
        date="Step 2"
        iconStyle={{ background: '#667eea', color: '#fff' }}
        icon={<span>2</span>}
      >
        <h3>Profile Configuration</h3>
        <p>Complete your profile with relevant information.</p>
      </VerticalTimelineElement>

      <VerticalTimelineElement
        date="Step 3"
        iconStyle={{ background: '#667eea', color: '#fff' }}
        icon={<span>3</span>}
      >
        <h3>Start Using</h3>
        <p>You're all set! Begin exploring the platform.</p>
      </VerticalTimelineElement>
    </VerticalTimeline>
  );
}

// Right-aligned single column
function RightAlignedTimeline() {
  return (
    <VerticalTimeline layout="1-column-right" lineColor="#f093fb" animate={true}>
      <VerticalTimelineElement
        date="Q1 2024"
        iconStyle={{ background: '#f093fb', color: '#fff' }}
        icon={<span>Q1</span>}
      >
        <h3>Planning Phase</h3>
        <p>Market research and product roadmap definition.</p>
      </VerticalTimelineElement>

      <VerticalTimelineElement
        date="Q2 2024"
        iconStyle={{ background: '#f5576c', color: '#fff' }}
        icon={<span>Q2</span>}
      >
        <h3>Development</h3>
        <p>Core feature implementation and testing.</p>
      </VerticalTimelineElement>

      <VerticalTimelineElement
        date="Q3 2024"
        iconStyle={{ background: '#4facfe', color: '#fff' }}
        icon={<span>Q3</span>}
      >
        <h3>Launch</h3>
        <p>Public release and marketing campaign.</p>
      </VerticalTimelineElement>
    </VerticalTimeline>
  );
}

export { LeftAlignedTimeline, RightAlignedTimeline };
```

--------------------------------

### VerticalTimeline Props

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Props available for the VerticalTimeline component.

```APIDOC
## 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'`).
```

--------------------------------

### VerticalTimeline Component

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

The container component that manages the overall layout, line color, and animation settings for the timeline.

```APIDOC
## VerticalTimeline Component

### Description
The VerticalTimeline component serves as the container for all timeline elements. It renders the vertical line and manages the overall layout of the timeline.

### Parameters
- **animate** (Boolean) - Optional - Enable or disable scroll-triggered animations. Default: true
- **className** (String) - Optional - Additional CSS class for the root element.
- **layout** (String) - Optional - Layout mode: '1-column-left', '1-column-right', or '2-columns'. Default: '2-columns'
- **lineColor** (String) - Optional - Color of the vertical timeline line. Default: '#FFF'
```

--------------------------------

### VerticalTimelineElement Props

Source: https://github.com/stephane-monnot/react-vertical-timeline/blob/master/README.md

Props available for the VerticalTimelineElement component.

```APIDOC
## VerticalTimelineElement Props

### `className={ String }`

Add extra class name to root div element.

### `contentArrowStyle={ Object }`

Add extra style to content arrow div element.
```

--------------------------------

### Configure Intersection Observer for Animations

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Use intersectionObserverProps to control when animations trigger. Adjust rootMargin, triggerOnce, and threshold for custom animation timing and behavior.

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

<VerticalTimeline>
  {/* Element with custom intersection observer settings */}
  <VerticalTimelineElement
    date="2023"
    iconStyle={{ background: '#6a4c93', color: '#fff' }}
    icon={<span>1</span>}
    intersectionObserverProps={{
      rootMargin: '0px 0px -100px 0px',  // Trigger earlier (100px before element enters)
      triggerOnce: true,                  // Only animate once
      threshold: 0.25                     // Trigger when 25% visible
    }}
  >
    <h3>Early Trigger Element</h3>
    <p>This element animates when it's 100px from entering the viewport.</p>
  </VerticalTimelineElement>

  {/* Element that re-animates on every scroll */}
  <VerticalTimelineElement
    date="2022"
    iconStyle={{ background: '#1982c4', color: '#fff' }}
    icon={<span>2</span>}
    intersectionObserverProps={{
      rootMargin: '0px 0px 0px 0px',
      triggerOnce: false,                 // Re-animate every time element enters view
      threshold: 0.5
    }}
  >
    <h3>Re-animating Element</h3>
    <p>This element bounces in every time you scroll past it.</p>
  </VerticalTimelineElement>

  {/* Always visible element (no scroll animation) */}
  <VerticalTimelineElement
    date="2021"
    iconStyle={{ background: '#8ac926', color: '#fff' }}
    icon={<span>3</span>}
    visible={true}
  >
    <h3>Always Visible</h3>
    <p>This element is visible immediately without waiting for scroll.</p>
  </VerticalTimelineElement>
</VerticalTimeline>
```

--------------------------------

### Apply Custom Styles to Timeline Elements

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

Use inline style props like contentStyle, iconStyle, and lineColor to override default component aesthetics.

```jsx
import React from 'react';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import './custom-timeline.css'; // Your custom overrides

function CustomStyledTimeline() {
  return (
    <VerticalTimeline
      lineColor="linear-gradient(180deg, #667eea 0%, #764ba2 100%)"
      className="custom-timeline"
    >
      <VerticalTimelineElement
        style={{
          marginBottom: '40px'  // Custom spacing
        }}
        contentStyle={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: '#fff',
          borderRadius: '12px',
          boxShadow: '0 10px 30px rgba(102, 126, 234, 0.3)'
        }}
        contentArrowStyle={{
          borderRight: '7px solid #667eea'
        }}
        date="2024"
        dateClassName="gradient-date"
        iconStyle={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: '#fff',
          boxShadow: '0 4px 20px rgba(102, 126, 234, 0.4)'
        }}
        iconClassName="gradient-icon"
        textClassName="gradient-text"
        icon={<span style={{ fontWeight: 'bold' }}>NEW</span>}
        shadowSize="large"
      >
        <h3 style={{ margin: 0, fontSize: '1.5rem' }}>Custom Gradient Card</h3>
        <p style={{ opacity: 0.9 }}>
          Fully customized timeline element with gradient backgrounds,
          custom shadows, and modern styling.
        </p>
      </VerticalTimelineElement>
    </VerticalTimeline>
  );
}

export default CustomStyledTimeline;
```

--------------------------------

### Reference CSS Classes for Custom Styling

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

These CSS classes are applied by the component and can be overridden in your stylesheet for custom visual adjustments.

```css
/* Timeline container classes */
.vertical-timeline { }
.vertical-timeline--animate { }
.vertical-timeline--two-columns { }
.vertical-timeline--one-column-left { }
.vertical-timeline--one-column-right { }

/* Timeline element classes */
.vertical-timeline-element { }
.vertical-timeline-element--left { }
.vertical-timeline-element--right { }
.vertical-timeline-element--no-children { }

/* Element content classes */
.vertical-timeline-element-content { }
.vertical-timeline-element-content-arrow { }
.vertical-timeline-element-title { }
.vertical-timeline-element-subtitle { }
.vertical-timeline-element-date { }

/* Icon classes */
.vertical-timeline-element-icon { }
.vertical-timeline-element-icon.shadow-size-small { }
.vertical-timeline-element-icon.shadow-size-medium { }
.vertical-timeline-element-icon.shadow-size-large { }

/* Animation classes */
.vertical-timeline-element-icon.bounce-in { }
.vertical-timeline-element-icon.is-hidden { }
.vertical-timeline-element-content.bounce-in { }
.vertical-timeline-element-content.is-hidden { }
```

--------------------------------

### VerticalTimelineElement Component

Source: https://context7.com/stephane-monnot/react-vertical-timeline/llms.txt

The component representing individual events on the timeline, supporting custom content, icons, dates, and click handlers.

```APIDOC
## VerticalTimelineElement Component

### Description
The VerticalTimelineElement component represents individual events on the timeline. Each element can contain custom content, icons, dates, and supports extensive styling options.

### Parameters
- **className** (String) - Optional - CSS class for the element.
- **contentStyle** (Object) - Optional - Inline styles for the content box.
- **contentArrowStyle** (Object) - Optional - Inline styles for the content arrow.
- **date** (String) - Optional - Date string displayed on the element.
- **dateClassName** (String) - Optional - CSS class for the date element.
- **iconStyle** (Object) - Optional - Inline styles for the icon container.
- **icon** (Node) - Optional - Icon component to display.
- **iconClassName** (String) - Optional - CSS class for the icon.
- **shadowSize** (String) - Optional - Size of the shadow (e.g., 'medium').
- **onTimelineElementClick** (Function) - Optional - Callback for element click.
- **iconOnClick** (Function) - Optional - Callback for icon click.
- **position** (String) - Optional - Force position ('left' or 'right').
- **visible** (Boolean) - Optional - Force visibility state.
```
Tokens:
Raw