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 #

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

Props

    Name Type Default
    order 'default' | 'vertical' | 'horizontal' | 'activity' | 'group' 'default'

TimelineItem #

  • 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.

Props

    Name Type Default
    title string ''
    date string ''
    svgClass string 'w-3 h-3 text-primary-600 dark:text-primary-400'

Slots

    Names
    icon
    icon
    icon

TimelineHorizontal #

  • 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.

Props

    Name Type Default
    olClass string 'sm:flex'

Activity #

  • Use the class prop to overwrite olClass.

Props

    Name Type Default
    olClass string 'relative border-l border-gray-200 dark:border-gray-700'

ActivityItem #

  • 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.

Props

    Name Type Default
    activities ActivityType[]
    liClass string 'mb-10 ml-6'
    spanClass string 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900'
    imgClass string 'rounded-full shadow-lg'
    outerDivClass string 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600'
    innerDivClass string 'justify-between items-center mb-3 sm:flex'
    timeClass string 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0'
    titleClass string 'text-sm font-normal text-gray-500 lex dark:text-gray-300'
    textClass string 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300'

Group #

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

Props

    Name Type Default
    divClass string 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700'
    timeClass string 'text-lg font-semibold text-gray-900 dark:text-white'
    date Date | string
    olClass string 'mt-3 divide-y divider-gray-200 dark:divide-gray-700'

GroupItem #

  • 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.

Props

    Name Type Default
    timelines GroupTimelineType[]
    aClass string 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700'
    imgClass string 'mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0'
    divClass string 'text-gray-600 dark:text-gray-400'
    titleClass string 'text-base font-normal'
    spanClass string 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400'

TimelineItemVertical #

  • 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.

Props

    Name Type Default
    title string
    date string
    liClass string 'mb-10 ml-6'
    spanClass string 'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900'
    h3Class string 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
    timeClass string 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500'

Slots

    Names
    icon

TimelineItemHorizonal #

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

Props

    Name Type Default
    title string
    date string
    href string
    text string
    liClass string 'relative mb-6 sm:mb-0'
    divClass string 'flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0'
    h3Class string 'text-lg font-semibold text-gray-900 dark:text-white'
    timeClass string 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500'
    pClass string 'text-base font-normal text-gray-500 dark:text-gray-400'
    aClass string 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700'
    linkname string
    icon string @prop export let timelineItems: TimelineItemHorizontalType[]

References #

Table Toast