Timeline - Laravel Blade

Use the timeline component to show a series of events in chronological order with support for vertical and horizontal layouts.

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

Blade code

<x-fwb.timeline>
    <x-fwb.timeline.item title="Application UI code in Tailwind CSS" date="February 2022">
        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
    </x-fwb.timeline.item>
    <x-fwb.timeline.item title="Marketing UI design in Figma" date="March 2022">
        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.
    </x-fwb.timeline.item>
    <x-fwb.timeline.item title="E-Commerce UI code in Tailwind CSS" date="April 2022">
        Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    </x-fwb.timeline.item>
</x-fwb.timeline>

Timeline with Icons

  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. Learn more

  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.

Blade code

<x-fwb.timeline>
    <x-fwb.timeline.item title="Flowbite Application UI v2.0.0" date="Released on January 13th, 2022" fwb-icon="s-calendar-month">
        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
        <a href="#" class="inline-flex items-center px-4 py-2 mt-3 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-100 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">Learn more
            <x-fwb-o-arrow-right class="w-3 h-3 ms-2 rtl:rotate-180" />
        </a>
    </x-fwb.timeline.item>
    <x-fwb.timeline.item title="Flowbite Figma v1.3.0" date="Released on December 7th, 2021" fwb-icon="s-calendar-month">
        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.
    </x-fwb.timeline.item>
    <x-fwb.timeline.item title="Flowbite Library v1.2.2" date="Released on December 2nd, 2021" fwb-icon="s-calendar-month">
        Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    </x-fwb.timeline.item>
</x-fwb.timeline>

Horizontal Timeline

  1. Flowbite Library v1.0

    Get started with dozens of web components and interactive elements.

  2. Flowbite Library v1.2

    All of the pages and components are first designed in Figma.

  3. Flowbite Library v1.3

    Get access to over 20+ pages including a dashboard layout.

Blade code

<x-fwb.timeline :horizontal="true">
    <x-fwb.timeline.item :horizontal="true" title="Flowbite Library v1.0" date="Released on January 2022">
        Get started with dozens of web components and interactive elements.
    </x-fwb.timeline.item>
    <x-fwb.timeline.item :horizontal="true" title="Flowbite Library v1.2" date="Released on March 2022">
        All of the pages and components are first designed in Figma.
    </x-fwb.timeline.item>
    <x-fwb.timeline.item :horizontal="true" title="Flowbite Library v1.3" date="Released on December 2022">
        Get access to over 20+ pages including a dashboard layout.
    </x-fwb.timeline.item>
</x-fwb.timeline>

Activity Log

  1. Bonnie Green
    Bonnie Green commented on Flowbite Pro
  2. Thomas Lean
    Thomas Lean moved Pricing page to In Progress
  3. Jese Leos
    Jese Leos liked Flowbite Pro

Blade code

<x-fwb.timeline>
    <x-fwb.timeline.item date="Just now">
        <x-slot:icon>
            <img class="rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="Bonnie Green">
        </x-slot:icon>
        <span class="font-semibold text-gray-900 dark:text-white">Bonnie Green</span> commented on <span class="font-semibold text-gray-900 dark:text-white">Flowbite Pro</span>
    </x-fwb.timeline.item>
    <x-fwb.timeline.item date="2 hours ago">
        <x-slot:icon>
            <img class="rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Thomas Lean">
        </x-slot:icon>
        <span class="font-semibold text-gray-900 dark:text-white">Thomas Lean</span> moved <span class="font-semibold text-gray-900 dark:text-white">Pricing page</span> to In Progress
    </x-fwb.timeline.item>
    <x-fwb.timeline.item date="1 day ago">
        <x-slot:icon>
            <img class="rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos">
        </x-slot:icon>
        <span class="font-semibold text-gray-900 dark:text-white">Jese Leos</span> liked <span class="font-semibold text-gray-900 dark:text-white">Flowbite Pro</span>
    </x-fwb.timeline.item>
</x-fwb.timeline>

Component Properties

Timeline x-fwb.timeline

Prop Type Default Description
horizontal bool false Display the timeline in a horizontal layout.
variant string default Timeline style variant: default or activity.

Timeline Item x-fwb.timeline.item

Prop Type Default Description
title string|null null The heading text for the timeline item.
date string|null null Date or timestamp text displayed below the title.
horizontal bool false Render this item in horizontal layout mode.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. s-calendar-month). Renders with default w-2.5 h-2.5 text-fg-brand-strong classes.
icon slot — Named slot for full icon control in the timeline dot area. Takes priority over fwb-icon prop.