React Timeline - Flowbite

Use the timeline component from Flowbite React to display a list of items and events in a chronological order based on multiples styles, colors and layouts

The timeline component can be used to show a list of events and items in a chronological order with a vertical or horizontal alignment based on multiple examples, styles, layouts, and colors.

You can customize the content and options of the timeline component by using the custom React props API from Flowbite React and the utility classes from Tailwind CSS for quick style changes.

In order to use the timeline component make sure to import it first from Flowbite React:

import { Timeline } from "flowbite-react";

Default timeline#

Use the <Timeline> React component and the child components to create a list of items inside the timeline component featuring the date, title, description and even a button.

Edit on GitHub

  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.

  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.

  3. E-Commerce UI code in Tailwind CSS

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

import { Button, Timeline } from "flowbite-react";
import { HiArrowNarrowRight } from "react-icons/hi";

export function Component() {
  return (
    <Timeline>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>February 2022</Timeline.Time>
          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
            E-commerce & Marketing pages.
          </Timeline.Body>
          <Button color="gray">
            Learn More
            <HiArrowNarrowRight className="ml-2 h-3 w-3" />
          </Button>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>March 2022</Timeline.Time>
          <Timeline.Title>Marketing UI design in Figma</Timeline.Title>
          <Timeline.Body>
            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.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>April 2022</Timeline.Time>
          <Timeline.Title>E-Commerce UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

Vertical timeline#

Use this example to show the timeline component and the child components in a vertical alignment.

Edit on GitHub

  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.

  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.

  3. E-Commerce UI code in Tailwind CSS

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

import { Button, Timeline } from "flowbite-react";
import { HiArrowNarrowRight, HiCalendar } from "react-icons/hi";

export function Component() {
  return (
    <Timeline>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>February 2022</Timeline.Time>
          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
            E-commerce & Marketing pages.
          </Timeline.Body>
          <Button color="gray">
            Learn More
            <HiArrowNarrowRight className="ml-2 h-3 w-3" />
          </Button>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>March 2022</Timeline.Time>
          <Timeline.Title>Marketing UI design in Figma</Timeline.Title>
          <Timeline.Body>
            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.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>April 2022</Timeline.Time>
          <Timeline.Title>E-Commerce UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

Horizontal timeline#

Use the horizontal prop to show the timeline component and the child components in a horizontal alignment.

Edit on GitHub
"use client";

import { Button, Timeline } from "flowbite-react";
import { HiArrowNarrowRight, HiCalendar } from "react-icons/hi";

export function Component() {
  return (
    <Timeline horizontal>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>February 2022</Timeline.Time>
          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
            E-commerce & Marketing pages.
          </Timeline.Body>
          <Button color="gray">
            Learn More
            <HiArrowNarrowRight className="ml-2 h-3 w-3" />
          </Button>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>March 2022</Timeline.Time>
          <Timeline.Title>Marketing UI design in Figma</Timeline.Title>
          <Timeline.Body>
            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.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={HiCalendar} />
        <Timeline.Content>
          <Timeline.Time>April 2022</Timeline.Time>
          <Timeline.Title>E-Commerce UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

Render props#

Use the render prop to render an Avatar or any other component as TimelinePoint inner content.

Edit on GitHub
"use client";

import { Avatar, Badge, Timeline } from "flowbite-react";

export function Component() {
  <Timeline>
    <Timeline.Item>
      <Timeline.Point
        render={() => (
          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded size="xm" />
        )}
      />
      <Timeline.Content>
        <Timeline.Body>
          <Card>
            <div className="-m-2 sm:flex sm:items-center sm:justify-between">
              <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">just now</time>

              <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
                Bonnie moved{" "}
                <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
                  Jese Leos
                </a>{" "}
                to{" "}
                <Badge color="gray" className="inline">
                  Funny Group
                </Badge>
              </div>
            </div>
          </Card>
        </Timeline.Body>
      </Timeline.Content>
    </Timeline.Item>
    <Timeline.Item>
      <Timeline.Point
        render={() => (
          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded size="xm" />
        )}
      />
      <Timeline.Content>
        <Timeline.Body>
          <Card>
            <div className="-m-2">
              <div className="mb-3 sm:flex sm:items-center sm:justify-between">
                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">2 hours ago</time>
                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
                  Thomas Lean commented on{" "}
                  <a href="#" className="font-semibold text-gray-900 hover:underline dark:text-white">
                    Flowbite Pro
                  </a>
                </div>
              </div>

              <Card className="border-gray-200 bg-gray-50 text-xs font-normal italic text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300">
                <div className="-m-3">
                  Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design
                  system! This is the second session of our new webinar series on #DesignSystems discussions where
                  we'll be speaking about Measurement.
                </div>
              </Card>
            </div>
          </Card>
        </Timeline.Body>
      </Timeline.Content>
    </Timeline.Item>
    <Timeline.Item>
      <Timeline.Point
        render={() => (
          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded size="xm" />
        )}
      />
      <Timeline.Content>
        <Timeline.Body>
          <Card>
            <div className="-m-2 sm:flex sm:items-center sm:justify-between">
              <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">1 day ago</time>

              <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
                Jese Leos has changed{" "}
                <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
                  Pricing page
                </a>{" "}
                task status to <span className="font-semibold text-gray-900 dark:text-white">Finished</span>
              </div>
            </div>
          </Card>
        </Timeline.Body>
      </Timeline.Content>
    </Timeline.Item>
  </Timeline>
}

Theme#

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

{
  "root": {
    "direction": {
      "horizontal": "sm:flex",
      "vertical": "relative border-l border-gray-200 dark:border-gray-700"
    }
  },
  "item": {
    "root": {
      "horizontal": "relative mb-6 sm:mb-0",
      "vertical": "mb-10 ml-6"
    },
    "content": {
      "root": {
        "base": "",
        "horizontal": "mt-3 sm:pr-8",
        "vertical": ""
      },
      "body": {
        "base": "mb-4 text-base font-normal text-gray-500 dark:text-gray-400"
      },
      "time": {
        "base": "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
      },
      "title": {
        "base": "text-lg font-semibold text-gray-900 dark:text-white"
      }
    },
    "point": {
      "horizontal": "flex items-center",
      "line": "hidden h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",
      "marker": {
        "base": {
          "horizontal": "absolute -left-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700",
          "vertical": "absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"
        },
        "icon": {
          "base": "h-3 w-3 text-cyan-600 dark:text-cyan-300",
          "wrapper": "absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-cyan-200 ring-8 ring-white dark:bg-cyan-900 dark:ring-gray-900"
        }
      },
      "vertical": ""
    }
  }
}

References#