Svelte Timeline - Flowbite

Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants

The timeline component can be used to show series of data in a chronological order for use cases such as activity feeds, user actions, application updates, and more.

Setup #

  • Svelte
<script>
  import { Timeline, TimelineItem, TimelineItemVertical, TimelineItemHorizontal, TimelineHorizontal, Activity, ActivityItem, Group, GroupItem } from 'flowbite-svelte';
</script>

Default timeline #

  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. Application UI code in Tailwind CSS

    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. Application UI code in Tailwind CSS

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

  • Svelte
<script>
  import { Timeline, TimelineItem, Button } from 'flowbite-svelte';
  import { Icon } from 'flowbite-svelte-icons';
</script>

<Timeline>
  <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
    <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
    <Button color="alternative">Learn more<Icon name="arrow-right-outline" class="ml-2 w-3 h-3" /></Button>
  </TimelineItem>
  <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">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.</p>
  </TimelineItem>
  <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
  </TimelineItem>
</Timeline>

Vertical Timeline #

Use this vertical timeline component with icons and badges to show a more advanced set of data.

  1. Flowbite Application UI v2.0.0

    Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

  2. Flowbite Figma v1.3.0

    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. Flowbite Library v1.2.2

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

  • Svelte
<script>
  import { Timeline, TimelineItem } from 'flowbite-svelte';
  import { Icon } from 'flowbite-svelte-icons';
</script>

<Timeline order="vertical">
  <TimelineItem title="Flowbite Application UI v2.0.0" date="Released on January 13th, 2022">
    <svelte:fragment slot="icon">
      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
        <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
      </span>
    </svelte:fragment>
    <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
  </TimelineItem>
  <TimelineItem title="Flowbite Figma v1.3.0" date="Released on December 7th, 2021">
    <svelte:fragment slot="icon">
      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
        <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
      </span>
    </svelte:fragment>
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">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.</p>
  </TimelineItem>
  <TimelineItem title="Flowbite Library v1.2.2" date="Released on December 2nd, 2021">
    <svelte:fragment slot="icon">
      <span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900">
        <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
      </span>
    </svelte:fragment>
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
  </TimelineItem>
</Timeline>

Horizontal Timeline #

Use this horizontally aligned timeline component to show a series of data in a chronological order.

  1. Flowbite Library v1.0.0

    Get started with dozens of web components and interactive elements.

  2. Flowbite Library v1.2.0

    Get started with dozens of web components and interactive elements.

  3. Flowbite Library v1.3.0

    Get started with dozens of web components and interactive elements.

  • Svelte
<script>
  import { Timeline, TimelineItem } from 'flowbite-svelte';
  import { Icon } from 'flowbite-svelte-icons';
</script>

<Timeline order="horizontal">
  <TimelineItem title="Flowbite Library v1.0.0" date="Released on December 2nd, 2021">
    <svelte:fragment slot="icon">
      <div class="flex items-center">
        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
          <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
        </div>
        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
      </div>
    </svelte:fragment>
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
  </TimelineItem>
  <TimelineItem title="Flowbite Library v1.2.0" date="Released on December 23th, 2021">
    <svelte:fragment slot="icon">
      <div class="flex items-center">
        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
          <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
        </div>
        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
      </div>
    </svelte:fragment>
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
  </TimelineItem>
  <TimelineItem title="Flowbite Library v1.3.0" date="Released on January 5th, 2021">
    <svelte:fragment slot="icon">
      <div class="flex items-center">
        <div class="flex z-10 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-0 ring-white dark:bg-primary-900 sm:ring-8 dark:ring-gray-900 shrink-0">
          <Icon name="calendar-week-solid" class="w-3 h-3 text-primary-600 dark:text-primary-400" />
        </div>
        <div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
      </div>
    </svelte:fragment>
    <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements.</p>
  </TimelineItem>
</Timeline>

Activity Log #

This component can be used to show the timline of a user’s activity history inside your application by using an avatar, datetime, description, and links to specific pages.

  1. image alt here
    Bonnie moved Jese Leos to Funny Group
  2. image alt here
    We don’t serve their kind here! What? Your droids.
    The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide.
  3. image alt here
    They’ll have to wait outside. We don’t want them here.
  • Svelte
<script>
  import { Activity, ActivityItem } from 'flowbite-svelte';
  let activities = [
    {
      title: 'Bonnie moved <a href="/" class="font-semibold text-primary-600 dark:text-primary-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
      date: 'just now',
      alt: 'image alt here',
      src: '/images/profile-picture-2.webp'
    },
    {
      title: 'We don’t serve their kind here! What? Your droids. ',
      date: '2 hours ago',
      alt: 'image alt here',
      src: '/images/profile-picture-2.webp',
      text: 'The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. '
    },
    {
      title: 'They’ll have to wait outside. We don’t want them here. ',
      date: '1 day ago',
      alt: 'image alt here',
      src: '/images/profile-picture-3.webp'
    }
  ];
</script>

<Activity>
  <ActivityItem {activities} />
</Activity>

Grouped timeline #

Use this component to group multiple data entries inside a single date and show elements like the avatar, title, description, tag and link to a relevant page.

  1. alt here
    Jese Leos likes Bonnie Green's post in How to start with Flowbite library
    "I wanted to share a webinar zeroheight."
    Private
  2. alt here
    Bonnie Green react to Thomas Lean's comment
    "I wanted to share a webinar zeroheight."
    Private
  • Svelte
<script>
  import { Group, GroupItem } from 'flowbite-svelte';
  let groupTimelines = [
    {
      title: '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
      src: '/images/profile-picture-1.webp',
      alt: 'alt here',
      href: '/',
      isPrivate: true,
      comment: '"I wanted to share a webinar zeroheight."'
    },
    {
      title: '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
      src: '/images/profile-picture-2.webp',
      alt: 'alt here',
      href: '/',
      isPrivate: true,
      comment: '"I wanted to share a webinar zeroheight."'
    }
  ];
</script>

<Group date="January 13th, 2022">
  <GroupItem timelines={groupTimelines} />
</Group>

Component data #

The component has the following props, type, and default values. See types page for type information.

Timeline styling #

  • Use the class prop to overwrite the ol tag class.

TimelineItem styling #

  • Use the classLi prop to overwrite the li tag class.
  • Use the classDiv prop to overwrite the div tag class.
  • Use the classTime prop to overwrite the time tag class.

TimelineHorizontal styling #

  • Use the liClass prop to overwrite classLi.
  • Use the divClass prop to overwrite classDiv.
  • Use the timeClass prop to overwrite classTime.
  • Use the pClass prop to overwrite classP.
  • Use the aClass prop to overwrite classA.

Activity styling #

  • Use the class prop to overwrite olClass.

ActivityItem styling #

  • Use the classLi prop to overwrite liClass.
  • Use the classSpan prop to overwrite spanClass.
  • Use the classImg prop to overwrite imgClass.
  • Use the classOuterDiv prop to overwrite outerDivClass.
  • Use the classInnerDiv prop to overwrite innerDivClass.
  • Use the classTime prop to overwrite timeClass.
  • Use the classTitle prop to overwrite titleClass.
  • Use the classText prop to overwrite textClass.

Group styling #

  • Use the classDiv prop to overwrite divClass.
  • Use the classTime prop to overwrite timeClass.
  • Use the classOl prop to overwrite olClass.

GroupItem styling #

  • Use the classA prop to overwrite aClass.
  • Use the classImg prop to overwrite imgClass.
  • Use the classDiv prop to overwrite divClass.
  • Use the classTitle prop to overwrite titleClass.
  • Use the classSpan prop to overwrite spanClass.

TimelineItemVertical styling #

  • Use the classLi prop to overwrite liClass.
  • Use the classSpan prop to overwrite spanClass.
  • Use the classH3 prop to overwrite h3Class.
  • Use the classTime prop to overwrite timeClass.

TimelineItemHorizonal styling #

  • Use the class prop to overwrite the ol tag class.

Props, events, and slots

References #

Table Toast