Timeline Component

ℹ️

The Timeline component is a React component designed to create visually appealing timelines for displaying chronological events or steps. It supports customization of events, icons, and styles. This component is inspired by the DaisyUI (opens in a new tab) framework's design for timelines. Check it out for more awesome components.

Example Preview

Timeline Example

Usage

Import the Timeline component in your React application and use it as follows:

import React from "react";
import { Timeline } from "@/@core";
 
const YourComponent = () => {
  // Your data for the timeline
  const timelineData = [
    {
      id: 1,
      title: "Title 1",
      content: "Content 1",
      position: "left",
      date: "2021-01-01",
      icon: "⛳",
      color: "primary",
      active: true,
    },
    {
      id: 2,
      title: "Title 2",
      content: "Content 2",
      position: "right",
      date: "2021-01-02",
      icon: "✓",
      color: "secondary",
      active: false,
    },
    // ... more items
  ];
 
  return (
    <div>
      <h2>Your Component Title</h2>
      <Timeline
        data={timelineData}
        variant="both-side"
        position="vertical"
        icon={true}
      />
    </div>
  );
};
 
export default YourComponent;

Props

Timeline Item Props

Name	Type	Description
`id`	`number`	A unique identifier for the timeline item.
`title`	`string`	The title or heading for the timeline item.
`content`	`ReactNode`, `string`	The content to be displayed for the timeline item. It can be a `"ReactNode"` or a `"string"`.
`position`	`left`, `right`	The position of the timeline item on the horizontal axis. Use either `"left"` or `"right"`.
`date`	`string`	The date associated with the timeline item.
`icon`	`string`	The icon to be displayed for the timeline item. Use icon names or symbols (e.g., '⛳', '✓').
`color`	`primary`, `secondary`, `accent`, `neutral`, `base`, `info`, `success`, `warning`, `error`	The color of the timeline item. Choose from predefined color options.
`active`	`boolean`	Determines whether the timeline item is active or not. An active item may be highlighted differently.

Timeline Props

Name	Type	Default	Description
`data`	`TimelineItemProps[]`	`[]`	An array of objects representing each timeline item.
`variant`	`string`		Specifies the variant of the timeline. Options: `both-side`, `bottom-side`, `top-side`, `different-side`, `snapped`.
`position`	`horizontal`, `vertical`	`'vertical'`	Specifies the position of the timeline. Use either `"horizontal"` or `"vertical"`.
`icon`	`boolean`	`true`	Determines whether to display icons in the timeline.

Variants

1. Both Side

Display timeline items on both sides of the timeline.

<Timeline data={yourData} variant="both-side" position="vertical" icon={true} />

2. Bottom Side

Display timeline items at the bottom of the timeline.

<Timeline
  data={yourData}
  variant="bottom-side"
  position="horizontal"
  icon={true}
/>

3. Top Side

Display timeline items at the top of the timeline.

<Timeline
  data={yourData}
  variant="top-side"
  position="horizontal"
  icon={true}
/>

4. Different Side

Display timeline items alternately on different sides.

<Timeline
  data={yourData}
  variant="different-side"
  position="horizontal"
  icon={true}
/>

5. Snapped

Display timeline items with icons snapped to the timeline.

<Timeline data={yourData} variant="snapped" position="horizontal" icon={true} />

ℹ️

Note: The Timeline component is a React component designed to create visually appealing timelines for displaying chronological events or steps. It supports customization of events, icons, and styles. This component is inspired by the DaisyUI (opens in a new tab) framework's design for timelines. Check it out for more awesome components.

Tabs Tooltip