Collection of free ReactJS timelines: horizontal, vertical

Welcome to our collection of React code examples! In this meticulously curated compilation, we have assembled a diverse range of code snippets that showcase the power and flexibility of the React library.

TimelineBubbles

Author:
Nickolas da Rocha Machado | July 15, 2021
About a code

Beautiful timelines for your presentations.

React Scroll Animation Component

Author:
Alex Kashuba | September 8, 2021
About a code

Could be used for timeline filling or any animations related to scrolling and crossing the middle of the screen.

TimelineJS

Author:
Ael Gain | August 8, 2021
About a code

React component to display timelines.

React Chrono

Author:
Prabhu Murthy | August 14, 2020
Made with:
HTML / CSS / JS

About a code

Modern timeline component for React.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
React Native Just Timeline

React Native Just Timeline

Author:
Mohamed Ahmed | March 7, 2020
Made with:
HTML / CSS / JS

About a code

React Native's customizable, RTL-supported, elegant, lazy-loading-ready timeline component.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
React Native Beautiful Timeline

React Native Beautiful Timeline

Author:
FreakyCoder | November 20, 2019
Made with:
HTML / CSS / JS

About a code

Fully customizable, beautifully designed Timeline for React Native.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Progress Timeline Bar

Author:
Stephen Reed | November 2, 2019
Made with:
HTML / CSS / JS

About a code

Highly customizable animated progress timeline bar for React which emphasizes due process.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
react-dom.js
Vertical Timeline Component in React

Vertical Timeline Component in React

Author:
Musa Bas | September 19, 2020
About a code

This is a React component that displays a timeline of events by order of occurance, bottom to top. On Desktop, the events are staggered inbetween two branches, whereas on mobile they collapse to a single branch.

React SVG Timeline

Author:
Rahel Lüthy | August 30, 2019
Made with:
HTML / CSS / JS

About a code

A React event timeline component based on SVG.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
React Timeline

React Timeline

Author:
Steven Mercatante | July 10, 2019
Made with:
HTML / CSS / JS

About a code

The easiest way to add a responsive and customizable timeline to React apps.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Vertical Timeline Component React

Vertical Timeline Component React

Author:
Eduardo Esteban Alvarez Castañeda | April 18, 2019
Made with:
HTML / CSS / JS

About a code

A simple component to generate a responsive vertical timeline for React.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Horizontal Timeline

Horizontal Timeline

Author:
Mailtop | March 29, 2019
Made with:
HTML / CSS / JS

About a code

A React component to create horizontal timelines.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
react-dom.js

Vertical Timeline Component for React

Author:
Veysi YILDIZ | November 11, 2018
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
React Gantt Timeline

React Gantt Timeline

Author:
Guillermo Quiros | September 4, 2018
Made with:
HTML / CSS / JS

About a code

A react timeline gannt component with virtual rendering.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
react-dom.js
React Timeline Semantic UI

React Timeline Semantic UI

Author:
Chuqi | August 25, 2018
Made with:
HTML / CSS / JS

About a code

This react timeline component is built with Semantic UI React.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
semantic-ui-react.js
react-native-timeline-theme

react-native-timeline-theme

About a code

Zaku |

About a code

Collection of TimeLine theme. This package only use flexbox (without absolute) & FlatList

react-timeline-scribble

react-timeline-scribble

About a code

Igor Kamyshev |

About a code

React timeline component.

react-vertical-timeline

react-vertical-timeline

About a code

Stéphane Monnot |

About a code

Vertical timeline for React.js.

react-native-timeline

react-native-timeline

About a code

ZackLeonardo |

About a code

React native timeline component.

react-time-line

react-time-line

About a code

Arun Ghosh |

About a code

A react component to display event in a vertical timeline format.

react-timespan

react-timespan

About a code

Cole Turner |

About a code

Timeline component with gallery view and scrolling time plots.

react-native-timeline-listview

react-native-timeline-listview

About a code

Watcharachai Kanjaikaew |

About a code

Timeline component for React native app.

react-life-timeline

react-life-timeline

About a code

Jeremy Gordon |

About a code

A life by weeks timeline component for React.

react-dual-timeline

react-dual-timeline

About a code

Fredrik Teschke |

About a code

A React component for animated timelines.

react-chronos

react-chronos

About a code

Rubens Mariuzzo |

About a code

React chronology component providing dual chronological timelines.

react-event-timeline

react-event-timeline

About a code

RC |

About a code

A responsive event timeline in React.js.

react-image-timeline

react-image-timeline

About a code

Aaron Geisler |

About a code

An image-centric timeline component for React.js. View chronological events in a pleasant way. Responsive & mobile-friendly. Easily customized. Gracefully handles overflow and non-uniform content. Lightweight (only CSS and SVG).

react-timeless

react-timeless

About a code

Daniel Rodrigues |

About a code

A simple React timeline component for filtering data...

react-horizontal-timeline

react-horizontal-timeline

About a code

Sherub Thakur |

About a code

A React.js port of the horizontal timeline developed by CodyHouse.

react-calendar-timeline

react-calendar-timeline

About a code

Namespace OÜ |

About a code

A modern and responsive React timeline component.

react-timeline-component

react-timeline-component

About a code

Eric Brookfield |

About a code

SVG Timeline built in React. For showing dates on a line.

react-vertical-timeline

react-vertical-timeline

About a code

Jesús F. Trujillo |

About a code

Vertical progress bar with bookmarks support.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨