Skip to main content

Timeline

The TkTimeline is a component that displays a vertical or horizontal timeline of events. The TkTimelineItem is a helper component used to create customized content within the TkTimeline component.

import { TkTimeline, TkTimelineItem } from '@takeoff-ui/react'

Playground​

Preview

Generated Code

<TkTimeline
  items={[{"title":"Event 1","description":"First event description","date":"2024-01-01"},{"title":"Event 2","description":"Second event description","date":"2024-02-15"},{"title":"Event 3","description":"Third event description","date":"2024-06-30"}]}
  orientation="horizontal"
  alternate
/>
<TkTimeline
  :items="[{"title":"Event 1","description":"First event description","date":"2024-01-01"},{"title":"Event 2","description":"Second event description","date":"2024-02-15"},{"title":"Event 3","description":"Third event description","date":"2024-06-30"}]"
  orientation="horizontal"
  :alternate.prop="true"
/>
<tk-timeline
  [items]="[{"title":"Event 1","description":"First event description","date":"2024-01-01"},{"title":"Event 2","description":"Second event description","date":"2024-02-15"},{"title":"Event 3","description":"Third event description","date":"2024-06-30"}]"
  orientation="horizontal"
  [alternate]="true"
/>

Controls

Basic​

This demo visualizes the items to display on the timeline. Each object should have at least a title. description and date are optional.

View Code
const items = [
  { title: 'First Commit', date: '07.07.2024' },
  { title: 'Prod', date: '16.12.2024', description: 'Live release' },
  {
    title: 'Open Source',
    date: '12.04.2025',
    description: 'Open source release',
  },
];

<TkTimeline items={items} />

Orientation​

This example illustrates the orientation of the timeline.

View Code
const items = [
  { title: 'First Commit', date: '07.07.2024' },
  { title: 'Prod', date: '16.12.2024', description: 'Live release' },
  {
    title: 'Open Source',
    date: '12.04.2025',
    description: 'Open source release',
  },
];

<TkTimeline items={items} />
<TkTimeline items={items} orientation="vertical" />

Alternate​

This example illustrates whether to alternate the position of timeline items relative to the line.

View Code
const items = [
  { title: 'First Commit', date: '07.07.2024' },
  { title: 'Prod', date: '16.12.2024', description: 'Live release' },
  {
    title: 'Open Source',
    date: '12.04.2025',
    description: 'Open source release',
  },
];

<TkTimeline items={items} />
<TkTimeline items={items} alternate={false} />

Customization​

TkTimelineItem is a helper component used to create customized content within the TkTimeline component. It's used to add HTML, images, buttons, or any custom content when the standard timeline item structure (title, description, date) isn't sufficient.

Custom Title

Custom imageCustom description with HTML and Image.
Important

Another custom timeline item

Yet Another Item

This is yet another custom timeline item with more content.

Final Item

This is the final custom timeline item.

View Code

  <TkTimeline orientation="vertical">
    <TkTimelineItem>
      <div className="custom-content">
        <h3 className="text-black-700">Custom Title</h3>
        <p>
          Custom description with <strong>HTML</strong>
        </p>
        <img
          src="https://flagpedia.net/data/flags/h24/tr.webp"
          alt="Custom image"
        />
      </div>
    </TkTimelineItem> 
  <TkTimeline />

API​

Props​

NameTypeDefaultDescription
booleantrueWhether to alternate the position of timeline items relative to the line.
TimelineItem[][]An array of objects representing the items to display on the timeline. Each object should have at least a title. description and date are optional.
"horizontal", "vertical"'horizontal'The orientation of the timeline.

Interfaces​

TimelineItem​

interface TimelineItem {
  title: string;
  description?: string;
  date?: string;
}