Timeline

The Timeline component from pol-ui creates an animated heading that displays a list of words one by one. It is a great way to create a dynamic and engaging heading for your website.

Importation

Import the component from pol-ui to use the Timeline element:

import { Timeline } from "pol-ui";

Default Timeline

import { Timeline } from "pol-ui";
import { TbStarFilled } from "react-icons/tb";
export const TimelineExample = (): JSX.Element => (
  <Timeline>
    <TimelineItem>
      April 2023
      <h2 className="text-black font-bold">Pol-ui is released</h2>
      Our first major release of Pol-ui is out. We have a lot of features and
      components to help you build your
    </TimelineItem>
    <TimelineItem>
      October 2023
      <h2 className="text-black font-bold">We now support Tailwind CSS</h2>
      To make it easier to customize the look and feel of Pol-ui, we now support
      Tailwind CSS out of the box.
    </TimelineItem>
    <TimelineItem icon={TbStarFilled}>
      February 2024
      <h2 className="text-black font-bold">
        Our base components are now ready
      </h2>
      We have a lot of base components to help you build your application
      faster.
    </TimelineItem>
  </Timeline>
);

Props

Prop name	Type	Default	Description
theme	TimelineTheme		The theme to be applied to the component.
horizontal	boolean	false	The direction of the timeline.

TimelineItem

Prop name	Type	Default	Description
theme	TimelineItemTheme		The theme to be applied to the component.
iconContent	ReactNode	null	The content of the icon.
icon	ReactNode	null	The icon to be displayed.
iconClassName	string	null	The class name of the icon.

Examples

Horizontal Timeline

Example with long text

import { Timeline } from "pol-ui";
import { TbStarFilled } from "react-icons/tb";
export const TimelineExample = (): JSX.Element => (
  <Timeline horizontal>
    <TimelineItem>
      April 2023
      <h2 className="text-black font-bold">Pol-ui is released</h2>
      Our first major release of Pol-ui is out. We have a lot of features and
      components to help you build your
    </TimelineItem>
    <TimelineItem>
      October 2023
      <h2 className="text-black font-bold">We now support Tailwind CSS</h2>
      To make it easier to customize the look and feel of Pol-ui, we now support
      Tailwind CSS out of the box.
    </TimelineItem>
    <TimelineItem icon={TbStarFilled}>
      February 2024
      <h2 className="text-black font-bold">
        Our base components are now ready
      </h2>
      We have a lot of base components to help you build your application
      faster.
    </TimelineItem>
  </Timeline>
);

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface TimelineTheme {
  root: {
    direction: {
      horizontal: string;
      vertical: string;
    };
  };
  item: {
    root: {
      horizontal: string;
      vertical: string;
    };
    content: string;
    point: {
      horizontal: string;
      line: string;
      marker: {
        base: {
          horizontal: string;
          vertical: string;
        };
        icon: {
          base: string;
          wrapper: string;
        };
      };
      vertical: string;
    };
  };
}