Qwik timeline - Flowbite

Use the timeline component from Flowbite Qwik 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 Qwik props API from Flowbite Qwik 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-qwik :

import { Timeline } from "flowbite-qwik"

Default timeline

Use the <Timeline> Qwik 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
tsx
import { component$ } from '@builder.io/qwik'
import { Button, Timeline } from 'flowbite-qwik'
import { IconArrowRightOutline } from 'flowbite-qwik-icons'

export default 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="light" suffix={IconArrowRightOutline}>
            Learn More
          </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>
  )
})

Horizontal timeline

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

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, Timeline } from 'flowbite-qwik'
import { IconArrowRightSolid, IconCalendarMonthOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Timeline horizontal>
      <Timeline.Item>
        <Timeline.Point icon={IconCalendarMonthOutline} />
        <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="light" suffix={IconArrowRightSolid}>
            Learn More
          </Button>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point icon={IconCalendarMonthOutline} />
        <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={IconCalendarMonthOutline} />
        <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>
  )
})