Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Timeline

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.

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.

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.

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.

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.
Warning: the ActivityItem title and text are using @html.
  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.

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.
Warning: the GroupItem title is using @html.