Timeline - Keep React

Timeline Component is a graphical representation used to visualize a sequence of events or activities over time. It presents information in a chronological order, allowing users to track the progression of events, milestones, or changes. Timelines often include markers, labels, and other visual cues to enhance understanding and engagement.

Table of Contents#

Default Timeline#

The Default Timeline is a fundamental component that visually presents a sequence of events over time. Each event is showcased in chronological order, offering details such as event dates, titles, and descriptions.

  1. Mobile App Development

    Launching our new mobile app on both iOS and Android platforms, providing users with seamless access to our services on the go.

  2. Enhanced User Analytics

    Introducing advanced user analytics to gain deeper insights into user behavior and improve overall user experience.

  3. New Feature Rollout

    Rolling out a set of new features, including real-time chat support, enhanced search functionality, and personalized content recommendations.

Horizontal Timeline#

The Horizontal Timeline component is designed to display a timeline of events in a horizontal layout. To do that, you need to add horizontal={true} props.

  1. New Years Day

    Celebrating the start of a new year with friends and family.

  2. Birthday Bash

    Throwing a fun-filled birthday party to celebrate another year of life.

  3. Independence Day

    Enjoying a spectacular display of fireworks and patriotic festivities.

Dashed Border Timeline#

The Dashed Border Timeline component represents a timeline with dashed borders, creating a distinct visual style for the timeline elements. There are two types of bar type variant in our design system. One is timelineBarType="solid",which is set by default and the other is timelineBarType="dashed".

  1. New Feature Launch

    Introducing a set of exciting new features that enhance user experience and functionality.

  2. User Interface Refinement

    Embarking on a user interface refinement phase to improve aesthetics and usability.

  3. Performance Optimization

    Focusing on performance optimization to ensure a seamless and efficient user experience.

Timeline With Image#

The Image Timeline is a dynamic component that showcases a sequence of events along with corresponding images. Each event is presented within a timeline structure, featuring a time indicator, event title, image, and a concise description.

  1. Application UI code in Tailwind CSS

    Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

    timeline

  2. Marketing UI design in Figma

    All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.

    timeline

  3. E-Commerce UI code in Tailwind CSS

    Get started with dozens of web components and interactive elements built on top of Tailwind CSS.

API Reference#

Explore the available props for the timeline component

PropertyDescriptionTypeDefault
horizontalArranges the timeline component horizontally if set to true.booleanfalse
gradientPointAdds a gradient effect to the timeline event markers.booleanfalse
gradientColorAdds a gradient color with class "bg-gradient-{1-31}".stringbg-gradient-9
timelineBarTypeSets the type of bar style in the timeline.
solid
dashed
solid