Timeline
Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants
TimelineItem: View Source Code
TimelineItemVertical: View Source Code
TimelineItemHorizontal: View Source Code
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
<script>
import { Timeline, TimelineItem, TimelineItemVertical, TimelineItemHorizontal, TimelineHorizontal, Activity, ActivityItem, Group, GroupItem } from 'flowbite-svelte';
</script>
Default timeline
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl.
Learn more -
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl.
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl.
<script lang="ts">
let timelineItems = [
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
href: '/',
linkname: 'Learn more',
text: 'Consectetur adipiscing elit...'
},
{
date: 'March 2022',
title: 'Lorem ipsum dolor sit amet',
text: 'Consectetur adipiscing elit...'
},
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
text: 'Consectetur adipiscing elit...'
}
];
</script>
<Timeline>
<TimelineItem {timelineItems} />
</Timeline>
Vertical Timeline
Use this vertical timeline component with icons and badges to show a more advanced set of data.
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
Learn more -
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
<script>
import { Calendar, Adjustments } from 'svelte-heros';
let timelineItems2 = [
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
href: '/',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
linkname: 'Learn more',
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'March 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Adjustments,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
}
];
</script>
<Timeline>
<TimelineItemVertical timelineItems={timelineItems2} />
</Timeline>
Horizontal Timeline
Use this horizontally aligned timeline component to show a series of data in a chronological order.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
<script lang="ts">
import { Calendar, Adjustments } from 'svelte-heros';
let timelineItems2 = [
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
href: '/',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
linkname: 'Learn more',
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'March 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Adjustments,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
}
];
</script>
<TimelineHorizontal>
<TimelineItemHorizontal timelineItems={timelineItems2} />
</TimelineHorizontal>
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.
-
Bonnie moved Jese Leos to Funny Group
-
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.
-
They’ll have to wait outside. We don’t want them here.
<script lang="ts">
let activities = [
{
title:
'Bonnie moved <a href="/" class="font-semibold text-blue-600 dark:text-blue-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.
<script lang="ts">
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} />
</Group>
Props
The component has the following props, type, and default values. See types page for type information.
Timeline
Name | Type | Default |
---|---|---|
olClass | string | 'relative border-l border-gray-200 dark:border-gray-700' |
TimelineItem
Name | Type | Default |
---|---|---|
timelineItems | TimelineItemType[] |
TimelineItemVertical
Name | Type | Default |
---|---|---|
timelineItems | TimelineItemVerticalType[] |
TimelineHorizontal
Name | Type | Default |
---|---|---|
olClass | string | 'items-center sm:flex' |
TimelineItemHorizontal
Name | Type | Default |
---|---|---|
timelineItems | TimelineItemHorizontalType[] |
Activity
Name | Type | Default |
---|---|---|
olClass | string | 'relative border-l border-gray-200 dark:border-gray-700' |
ActivityItem
Name | Type | Default |
---|---|---|
activities | ActivityType[] |
Group
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 |
GroupItem
Name | Type | Default |
---|---|---|
timelines | GroupTimelineType[] |