Timeline
Experimental Alpha
This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.
Timeline is a semantic component for displaying chronological events, processes, or activities in either horizontal or vertical orientation. It provides flexible slots for dates, markers, and descriptions with support for rich content including cards, badges, and interactive elements.
Examples
Live Preview
Horizontal Timeline
Vertical Timeline
Oatmeal and coffee
Daily standup
Focus time
Vertical with Card at End
Breakfast
Oatmeal and coffee
Meeting
Daily standup
Vertical with Card at Start
Breakfast
09:00 AMOatmeal and coffee
Meeting
10:00 AMDaily standup
Vertical Alternating
Step 1
09:00 AMStart with a card
Step 2
End has the card
Step 3
11:00 AMBack to start card
Step 4
End has the card
Vertical Rich
Project KickoffNew
Initial meeting with the stakeholders to define the project scope.
Design ReviewIn Progress
Reviewing the initial mockups with the design team.
Client Call
Discuss feedback on the latest release.
Order Tracking Timeline
A real-world e-commerce order tracking timeline with custom bordered markers and integrated components.
Order Placed
Mar 15, 2024 10:32 AM
Order #AG-2024-7821
Thank you for your purchase!
Items: 3 • Total: $127.98
Payment Verified
Mar 15, 2024 10:33 AM
Payment of $127.98 confirmed via ****-4242
Processing
Mar 15, 2024 2:15 PM
Your order is being prepared
Shipped
Estimated: Mar 16
Awaiting shipment pickup...
Out for Delivery
Estimated: Mar 18
Your package is on the way
Delivered
Estimated: Mar 19
Package will be delivered to your address
View Vue Code
<template>
<section>
<!-- Horizontal Timeline -->
<div class="mbe4">
<h2>Horizontal Timeline</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="horizontal"
:responsive="false"
>
<AgTimelineItem>
<template #ag-start>2023-01-01</template>
<template #ag-marker>
<AgIcon
type="success"
size="18"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
/>
</svg>
</AgIcon>
</template>
<template #ag-end>Step 1 Completed</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>2023-02-01</template>
<template #ag-marker>
<AgIcon
type="info"
size="18"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
/>
</svg>
</AgIcon>
</template>
<template #ag-end>Step 2 In Progress</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>2023-03-01</template>
<template #ag-marker>
<AgIcon
type="warning"
size="18"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
fill="currentColor"
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
/>
</svg>
</AgIcon>
</template>
<template #ag-end>Step 3 Pending</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Vertical Timeline -->
<div class="mbe4">
<h2>Vertical Timeline</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="primary"
>
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</template>
<template #ag-end>
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>10:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</template>
<template #ag-end>
<strong>Meeting</strong>
<p>Daily standup</p>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>11:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</template>
<template #ag-end>
<strong>Work</strong>
<p>Focus time</p>
</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Vertical with Card at End -->
<div class="mbe4">
<h2>Vertical with Card at End</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="primary"
style="--ag-timeline-end-align: center"
>
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<div :style="cardStyle">
<strong>Breakfast</strong>
<p style="margin: 0">Oatmeal and coffee</p>
</div>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>10:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<div :style="cardStyle">
<strong>Meeting</strong>
<p style="margin: 0">Daily standup</p>
</div>
</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Vertical with Card at Start -->
<div class="mbe4">
<h2>Vertical with Card at Start</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="primary"
style="--ag-timeline-start-align: center"
>
<AgTimelineItem>
<template #ag-start>
<div :style="cardStyle">
<strong>Breakfast</strong>
<p style="margin: 0">Oatmeal and coffee</p>
</div>
</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>09:00 AM</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div :style="cardStyle">
<strong>Meeting</strong>
<p style="margin: 0">Daily standup</p>
</div>
</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>10:00 AM</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Vertical Alternating -->
<div class="mbe4">
<h2>Vertical Alternating</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="primary"
style="--ag-timeline-start-align: center; --ag-timeline-end-align: center"
>
<AgTimelineItem>
<template #ag-start>
<div :style="cardStyle">
<strong>Step 1</strong>
<p style="margin: 0">Start with a card</p>
</div>
</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>09:00 AM</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>10:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<div :style="cardStyle">
<strong>Step 2</strong>
<p style="margin: 0">End has the card</p>
</div>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div :style="cardStyle">
<strong>Step 3</strong>
<p style="margin: 0">Back to start card</p>
</div>
</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>11:00 AM</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>12:00 PM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<div :style="cardStyle">
<strong>Step 4</strong>
<p style="margin: 0">End has the card</p>
</div>
</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Vertical Rich -->
<div class="mbe4">
<h2>Vertical Rich</h2>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="primary"
style="--ag-timeline-end-align: center; --ag-timeline-start-align: center"
>
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<AgCard
animated
rounded="md"
>
<div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--ag-space-2);">
<strong>Project Kickoff</strong>
<AgBadge variant="success">New</AgBadge>
</div>
<p style="margin: 0 0 var(--ag-space-2) 0;">Initial meeting with the stakeholders to define the project scope.</p>
<VueButton
variant="primary"
shape="rounded"
size="sm"
>View Details</VueButton>
</AgCard>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<AgCard
animated
rounded="md"
>
<div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--ag-space-2);">
<strong>Design Review</strong>
<AgBadge variant="info">In Progress</AgBadge>
</div>
<p style="margin: 0 0 var(--ag-space-2) 0;">Reviewing the initial mockups with the design team.</p>
<div style="display: flex; gap: var(--ag-space-1);">
<VueButton
variant="primary"
shape="rounded"
size="sm"
>Approve</VueButton>
<VueButton
variant="primary"
shape="rounded"
size="sm"
bordered
>Reject</VueButton>
</div>
</AgCard>
</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>11:00 AM</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>02:00 PM</template>
<template #ag-marker>
<AgIcon
type="warning"
size="24"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
</AgIcon>
</template>
<template #ag-end>
<AgCard
animated
rounded="md"
>
<div style="display: flex; align-items: center; gap: var(--ag-space-2); margin-block-end: var(--ag-space-2);">
<strong>Client Call</strong>
<AgIconButton
size="sm"
label="Call Client"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.44-5.15-3.75-6.59-6.59l1.97-1.57c.26-.26.36-.65.25-1.01A11.36 11.36 0 019.64 4.44c.09-.5-.3-1.04-.8-1.04H4.4c-.56 0-1.06.48-1.07 1.05-.03 9.3 7.5 16.83 16.8 16.8.57-.01 1.05-.51 1.05-1.07v-4.4c0-.5-.54-.89-1.04-.8z" />
</svg>
</AgIconButton>
</div>
<p style="margin: 0;">Discuss feedback on the latest release.</p>
</AgCard>
</template>
</AgTimelineItem>
</AgTimeline>
</div>
<!-- Order Tracking Timeline -->
<div class="mbe4">
<h2>Order Tracking Timeline</h2>
<p style="color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.5rem;">
A real-world e-commerce order tracking timeline with custom bordered markers and integrated components.
</p>
</div>
<div class="mbe4">
<AgTimeline
orientation="vertical"
variant="monochrome"
>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;">
Order Placed
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;">
Mar 15, 2024 10:32 AM
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style="color: var(--ag-background-primary-inverted);"
/>
</svg>
</div>
</template>
<template #ag-end>
<AgCard style="background: var(--ag-background-primary); border-color: var(--ag-background-primary-inverted); margin-bottom: var(--ag-space-4);">
<div style="display: flex; justify-content: space-between; align-items: start; margin-block-end: 0.75rem;">
<div>
<div style="color: var(--ag-background-primary-inverted); font-weight: 600; margin-block-end: 0.25rem;">Order #AG-2024-7821</div>
<div style="color: var(--ag-text-secondary); font-size: 0.875rem;">Thank you for your purchase!</div>
</div>
<AgBadge
type="success"
style="--ag-badge-font-size: 0.75rem;"
>
Confirmed
</AgBadge>
</div>
<div style="color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-end: 0.5rem;">
Items: 3 • Total: $127.98
</div>
<AgButton
mode="secondary"
size="small"
style="width: 100%; --ag-button-bgcolor: transparent; --ag-button-border-color: var(--ag-background-primary-inverted); --ag-button-color: var(--ag-background-primary-inverted);"
>
View Order Details
</AgButton>
</AgCard>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;">
Payment Verified
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);">
Mar 15, 2024 10:33 AM
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style="color: var(--ag-background-primary-inverted);"
/>
</svg>
</div>
</template>
<template #ag-end>
<div style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem;">
Payment of $127.98 confirmed via ****-4242
</div>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;">
Processing
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;">
Mar 15, 2024 2:15 PM
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;">
<AgSpinner
size="small"
style="--ag-spinner-color: var(--ag-background-primary-inverted); width: 14px; height: 14px;"
></AgSpinner>
</div>
</template>
<template #ag-end>
<AgCard style="background: var(--ag-background-primary); border-color: var(--ag-background-primary-inverted); margin-bottom: var(--ag-space-4);">
<div style="color: var(--ag-background-primary-inverted); font-weight: 500; margin-block-end: 0.5rem;">Your order is being prepared</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<AgBadge
type="info"
style="--ag-badge-font-size: 0.75rem;"
>Wireless Headphones</AgBadge>
<AgBadge
type="info"
style="--ag-badge-font-size: 0.75rem;"
>USB-C Cable</AgBadge>
<AgBadge
type="info"
style="--ag-badge-font-size: 0.75rem;"
>Phone Case</AgBadge>
</div>
</AgCard>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;">
Shipped
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);">
Estimated: Mar 16
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"></div>
</template>
<template #ag-end>
<div style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem; font-style: italic;">
Awaiting shipment pickup...
</div>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;">
Out for Delivery
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);">
Estimated: Mar 18
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"></div>
</template>
<template #ag-end>
<div style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem;">
Your package is on the way
</div>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>
<div style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;">
Delivered
</div>
<div style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;">
Estimated: Mar 19
</div>
</template>
<template #ag-marker>
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"></div>
</template>
<template #ag-end>
<AgCard style="background: var(--ag-background-subtle); border-color: var(--ag-border); margin-bottom: var(--ag-space-4);">
<div style="color: var(--ag-text-secondary); margin-block-end: 0.5rem;">Package will be delivered to your address</div>
<div style="display: flex; gap: 0.5rem;">
<AgButton
mode="secondary"
size="small"
isDisabled
style="flex: 1;"
>
Track Package
</AgButton>
<AgButton
mode="secondary"
size="small"
isDisabled
style="flex: 1;"
>
Get Help
</AgButton>
</div>
</AgCard>
</template>
</AgTimelineItem>
</AgTimeline>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
VueTimeline as AgTimeline,
VueTimelineItem as AgTimelineItem,
} from "agnosticui-core/timeline/vue";
import { VueIcon as AgIcon } from "agnosticui-core/icon/vue";
import { VueCard as AgCard } from "agnosticui-core/card/vue";
import VueButton from "agnosticui-core/button/vue";
import { VueBadge as AgBadge } from "agnosticui-core/badge/vue";
import { VueIconButton as AgIconButton } from "agnosticui-core/icon-button/vue";
const cardStyle =
"border: 1px solid var(--ag-border); padding: var(--ag-space-2); border-radius: var(--ag-radius); background-color: var(--ag-background); margin-block-end: var(--ag-space-4);";
export default defineComponent({
name: "TimelineExamples",
components: {
AgTimeline,
AgTimelineItem,
AgIcon,
AgCard,
VueButton,
AgBadge,
AgIconButton,
},
setup() {
return {
cardStyle,
};
},
});
</script>
Live Preview
View Lit / Web Component Code
import { LitElement, html } from "lit";
import "agnosticui-core/timeline";
import "agnosticui-core/icon";
import "agnosticui-core/card";
import "agnosticui-core/button";
import "agnosticui-core/badge";
import "agnosticui-core/icon-button";
import "agnosticui-core/spinner";
const cardStyle = `
border: 1px solid var(--ag-border);
padding: var(--ag-space-2);
border-radius: var(--ag-radius);
background-color: var(--ag-background);
margin-block-end: var(--ag-space-4);
`;
class TimelineLitExamples extends LitElement {
createRenderRoot() {
return this;
}
render() {
return html`
<section>
<!-- Horizontal Timeline -->
<div class="mbe4">
<h2>Horizontal Timeline</h2>
</div>
<div class="mbe4">
<ag-timeline orientation="horizontal" .responsive=${false}>
<ag-timeline-item>
<span slot="ag-start">2023-01-01</span>
<ag-icon type="success" size="18" slot="ag-marker">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
/>
</svg>
</ag-icon>
<span slot="ag-end">Step 1 Completed</span>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">2023-02-01</span>
<ag-icon type="info" size="18" slot="ag-marker">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
/>
</svg>
</ag-icon>
<span slot="ag-end">Step 2 In Progress</span>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">2023-03-01</span>
<ag-icon type="warning" size="18" slot="ag-marker">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
/>
</svg>
</ag-icon>
<span slot="ag-end">Step 3 Pending</span>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Vertical Timeline -->
<div class="mbe4">
<h2>Vertical Timeline</h2>
</div>
<div class="mbe4">
<ag-timeline orientation="vertical" variant="primary">
<ag-timeline-item>
<span slot="ag-start">09:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end">
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</div>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">10:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end">
<strong>Meeting</strong>
<p>Daily standup</p>
</div>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">11:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end">
<strong>Work</strong>
<p>Focus time</p>
</div>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Vertical with Card at End -->
<div class="mbe4">
<h2>Vertical with Card at End</h2>
</div>
<div class="mbe4">
<ag-timeline
orientation="vertical"
variant="primary"
style="--ag-timeline-end-align: center"
>
<ag-timeline-item>
<span slot="ag-start">09:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end" style="${cardStyle}">
<strong>Breakfast</strong>
<p style="margin: 0">Oatmeal and coffee</p>
</div>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">10:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end" style="${cardStyle}">
<strong>Meeting</strong>
<p style="margin: 0">Daily standup</p>
</div>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Vertical with Card at Start -->
<div class="mbe4">
<h2>Vertical with Card at Start</h2>
</div>
<div class="mbe4">
<ag-timeline
orientation="vertical"
variant="primary"
style="--ag-timeline-start-align: center"
>
<ag-timeline-item>
<div slot="ag-start" style="${cardStyle}">
<strong>Breakfast</strong>
<p style="margin: 0">Oatmeal and coffee</p>
</div>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<span slot="ag-end">09:00 AM</span>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start" style="${cardStyle}">
<strong>Meeting</strong>
<p style="margin: 0">Daily standup</p>
</div>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<span slot="ag-end">10:00 AM</span>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Vertical Alternating -->
<div class="mbe4">
<h2>Vertical Alternating</h2>
</div>
<div class="mbe4">
<ag-timeline
orientation="vertical"
variant="primary"
style="--ag-timeline-start-align: center; --ag-timeline-end-align: center"
>
<ag-timeline-item>
<div slot="ag-start" style="${cardStyle}">
<strong>Step 1</strong>
<p style="margin: 0">Start with a card</p>
</div>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<span slot="ag-end">09:00 AM</span>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">10:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end" style="${cardStyle}">
<strong>Step 2</strong>
<p style="margin: 0">End has the card</p>
</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start" style="${cardStyle}">
<strong>Step 3</strong>
<p style="margin: 0">Back to start card</p>
</div>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<span slot="ag-end">11:00 AM</span>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">12:00 PM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<div slot="ag-end" style="${cardStyle}">
<strong>Step 4</strong>
<p style="margin: 0">End has the card</p>
</div>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Vertical Rich -->
<div class="mbe4">
<h2>Vertical Rich</h2>
</div>
<div class="mbe4">
<ag-timeline
orientation="vertical"
variant="primary"
style="--ag-timeline-end-align: center; --ag-timeline-start-align: center"
>
<ag-timeline-item>
<span slot="ag-start">09:00 AM</span>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<ag-card slot="ag-end" animated rounded="md">
<div
style="display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--ag-space-2);"
>
<strong>Project Kickoff</strong>
<ag-badge variant="success">New</ag-badge>
</div>
<p style="margin: 0 0 var(--ag-space-2) 0;">
Initial meeting with the stakeholders to define the project
scope.
</p>
<ag-button variant="primary" shape="rounded" size="sm"
>View Details</ag-button
>
</ag-card>
</ag-timeline-item>
<ag-timeline-item>
<ag-card slot="ag-start" animated rounded="md">
<div
style="display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--ag-space-2);"
>
<strong>Design Review</strong>
<ag-badge variant="info">In Progress</ag-badge>
</div>
<p style="margin: 0 0 var(--ag-space-2) 0;">
Reviewing the initial mockups with the design team.
</p>
<div style="display: flex; gap: var(--ag-space-1);">
<ag-button variant="primary" shape="rounded" size="sm"
>Approve</ag-button
>
<ag-button variant="primary" shape="rounded" size="sm" bordered
>Reject</ag-button
>
</div>
</ag-card>
<div
slot="ag-marker"
style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"
></div>
<span slot="ag-end">11:00 AM</span>
</ag-timeline-item>
<ag-timeline-item>
<span slot="ag-start">02:00 PM</span>
<ag-icon slot="ag-marker" type="warning" size="24">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
/>
</svg>
</ag-icon>
<ag-card slot="ag-end" animated rounded="md">
<div
style="display: flex; align-items: center; gap: var(--ag-space-2); margin-block-end: var(--ag-space-2);"
>
<strong>Client Call</strong>
<ag-icon-button size="sm" label="Call Client">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.44-5.15-3.75-6.59-6.59l1.97-1.57c.26-.26.36-.65.25-1.01A11.36 11.36 0 019.64 4.44c.09-.5-.3-1.04-.8-1.04H4.4c-.56 0-1.06.48-1.07 1.05-.03 9.3 7.5 16.83 16.8 16.8.57-.01 1.05-.51 1.05-1.07v-4.4c0-.5-.54-.89-1.04-.8z"
/>
</svg>
</ag-icon-button>
</div>
<p style="margin: 0;">
Discuss feedback on the latest release.
</p>
</ag-card>
</ag-timeline-item>
</ag-timeline>
</div>
<!-- Order Tracking Timeline -->
<div class="mbe4">
<h2>Order Tracking Timeline</h2>
<p
style="color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.5rem;"
>
A real-world e-commerce order tracking timeline with custom bordered
markers and integrated components.
</p>
</div>
<div class="mbe4">
<ag-timeline orientation="vertical" variant="monochrome">
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;"
>
Order Placed
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;"
>
Mar 15, 2024 10:32 AM
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style="color: var(--ag-background-primary-inverted);"
/>
</svg>
</div>
<ag-card
slot="ag-end"
style="background: var(--ag-background-primary); border-color: var(--ag-background-primary-inverted); margin-bottom: var(--ag-space-4);"
>
<div
style="display: flex; justify-content: space-between; align-items: start; margin-block-end: 0.75rem;"
>
<div>
<div
style="color: var(--ag-background-primary-inverted); font-weight: 600; margin-block-end: 0.25rem;"
>
Order #AG-2024-7821
</div>
<div
style="color: var(--ag-text-secondary); font-size: 0.875rem;"
>
Thank you for your purchase!
</div>
</div>
<ag-badge
type="success"
style="--ag-badge-font-size: 0.75rem;"
>Confirmed</ag-badge
>
</div>
<div
style="color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-end: 0.5rem;"
>
Items: 3 • Total: $127.98
</div>
<ag-button
mode="secondary"
size="small"
style="width: 100%; --ag-button-bgcolor: transparent; --ag-button-border-color: var(--ag-background-primary-inverted); --ag-button-color: var(--ag-background-primary-inverted);"
>View Order Details</ag-button
>
</ag-card>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;"
>
Payment Verified
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);"
>
Mar 15, 2024 10:33 AM
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style="color: var(--ag-background-primary-inverted);"
/>
</svg>
</div>
<div
slot="ag-end"
style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem;"
>
Payment of $127.98 confirmed via ****-4242
</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-background-primary-inverted); font-weight: 500;"
>
Processing
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;"
>
Mar 15, 2024 2:15 PM
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-background-primary-inverted); display: flex; align-items: center; justify-content: center;"
>
<ag-spinner
size="small"
style="--ag-spinner-color: var(--ag-background-primary-inverted); width: 14px; height: 14px;"
></ag-spinner>
</div>
<ag-card
slot="ag-end"
style="background: var(--ag-background-primary); border-color: var(--ag-background-primary-inverted); margin-bottom: var(--ag-space-4);"
>
<div
style="color: var(--ag-background-primary-inverted); font-weight: 500; margin-block-end: 0.5rem;"
>
Your order is being prepared
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<ag-badge type="info" style="--ag-badge-font-size: 0.75rem;"
>Wireless Headphones</ag-badge
>
<ag-badge type="info" style="--ag-badge-font-size: 0.75rem;"
>USB-C Cable</ag-badge
>
<ag-badge type="info" style="--ag-badge-font-size: 0.75rem;"
>Phone Case</ag-badge
>
</div>
</ag-card>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;"
>
Shipped
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);"
>
Estimated: Mar 16
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"
></div>
<div
slot="ag-end"
style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem; font-style: italic;"
>
Awaiting shipment pickup...
</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;"
>
Out for Delivery
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem; margin-block-end: var(--ag-space-4);"
>
Estimated: Mar 18
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"
></div>
<div
slot="ag-end"
style="color: var(--ag-text-secondary); font-size: 0.9rem; padding-inline-start: 0.5rem;"
>
Your package is on the way
</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">
<div
style="text-align: right; color: var(--ag-text-secondary); font-weight: 500;"
>
Delivered
</div>
<div
style="text-align: right; color: var(--ag-text-secondary); font-size: 0.875rem; margin-block-start: 0.25rem;"
>
Estimated: Mar 19
</div>
</div>
<div
slot="ag-marker"
style="width: 24px; height: 24px; border-radius: 50%; background: var(--ag-background-primary); border: 2px solid var(--ag-border);"
></div>
<ag-card
slot="ag-end"
style="background: var(--ag-background-subtle); border-color: var(--ag-border); margin-bottom: var(--ag-space-4);"
>
<div
style="color: var(--ag-text-secondary); margin-block-end: 0.5rem;"
>
Package will be delivered to your address
</div>
<div style="display: flex; gap: 0.5rem;">
<ag-button
mode="secondary"
size="small"
.isDisabled=${true}
style="flex: 1;"
>Track Package</ag-button
>
<ag-button
mode="secondary"
size="small"
.isDisabled=${true}
style="flex: 1;"
>Get Help</ag-button
>
</div>
</ag-card>
</ag-timeline-item>
</ag-timeline>
</div>
</section>
`;
}
}
customElements.define("timeline-lit-examples", TimelineLitExamples);Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.
View React Code
import {
ReactTimeline,
ReactTimelineItem,
} from "agnosticui-core/timeline/react";
import { ReactIcon } from "agnosticui-core/icon/react";
import { ReactCard } from "agnosticui-core/card/react";
import { ReactButton } from "agnosticui-core/button/react";
import { ReactBadge } from "agnosticui-core/badge/react";
import { ReactIconButton } from "agnosticui-core/icon-button/react";
import { ReactSpinner } from "agnosticui-core/spinner/react";
const cardStyle = {
border: "1px solid var(--ag-border)",
padding: "var(--ag-space-2)",
borderRadius: "var(--ag-radius)",
backgroundColor: "var(--ag-background)",
marginBottom: "var(--ag-space-4)",
};
export default function TimelineReactExamples() {
return (
<section>
{/* Horizontal Timeline */}
<div className="mbe4">
<h2>Horizontal Timeline</h2>
</div>
<div className="mbe4">
<ReactTimeline orientation="horizontal" responsive={false}>
<ReactTimelineItem>
<div slot="ag-start">2023-01-01</div>
<div slot="ag-marker">
<ReactIcon type="success" size="18">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
/>
</svg>
</ReactIcon>
</div>
<div slot="ag-end">Step 1 Completed</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">2023-02-01</div>
<div slot="ag-marker">
<ReactIcon type="info" size="18">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
/>
</svg>
</ReactIcon>
</div>
<div slot="ag-end">Step 2 In Progress</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">2023-03-01</div>
<div slot="ag-marker">
<ReactIcon type="warning" size="18">
<svg
xmlns="http://www.w3.org/2000/svg"
height="18"
viewBox="0 0 24 24"
width="18"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
/>
</svg>
</ReactIcon>
</div>
<div slot="ag-end">Step 3 Pending</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Vertical Timeline */}
<div className="mbe4">
<h2>Vertical Timeline</h2>
</div>
<div className="mbe4">
<ReactTimeline orientation="vertical" variant="primary">
<ReactTimelineItem>
<div slot="ag-start">09:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">10:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<strong>Meeting</strong>
<p>Daily standup</p>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">11:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<strong>Work</strong>
<p>Focus time</p>
</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Vertical with Card at End */}
<div className="mbe4">
<h2>Vertical with Card at End</h2>
</div>
<div className="mbe4">
<ReactTimeline
orientation="vertical"
variant="primary"
style={{ "--ag-timeline-end-align": "center" }}
>
<ReactTimelineItem>
<div slot="ag-start">09:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<div style={cardStyle}>
<strong>Breakfast</strong>
<p style={{ margin: 0 }}>Oatmeal and coffee</p>
</div>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">10:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<div style={cardStyle}>
<strong>Meeting</strong>
<p style={{ margin: 0 }}>Daily standup</p>
</div>
</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Vertical with Card at Start */}
<div className="mbe4">
<h2>Vertical with Card at Start</h2>
</div>
<div className="mbe4">
<ReactTimeline
orientation="vertical"
variant="primary"
style={{ "--ag-timeline-start-align": "center" }}
>
<ReactTimelineItem>
<div slot="ag-start">
<div style={cardStyle}>
<strong>Breakfast</strong>
<p style={{ margin: 0 }}>Oatmeal and coffee</p>
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">09:00 AM</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div style={cardStyle}>
<strong>Meeting</strong>
<p style={{ margin: 0 }}>Daily standup</p>
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">10:00 AM</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Vertical Alternating */}
<div className="mbe4">
<h2>Vertical Alternating</h2>
</div>
<div className="mbe4">
<ReactTimeline
orientation="vertical"
variant="primary"
style={{
"--ag-timeline-start-align": "center",
"--ag-timeline-end-align": "center",
}}
>
<ReactTimelineItem>
<div slot="ag-start">
<div style={cardStyle}>
<strong>Step 1</strong>
<p style={{ margin: 0 }}>Start with a card</p>
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">09:00 AM</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">10:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<div style={cardStyle}>
<strong>Step 2</strong>
<p style={{ margin: 0 }}>End has the card</p>
</div>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div style={cardStyle}>
<strong>Step 3</strong>
<p style={{ margin: 0 }}>Back to start card</p>
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">11:00 AM</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">12:00 PM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<div style={cardStyle}>
<strong>Step 4</strong>
<p style={{ margin: 0 }}>End has the card</p>
</div>
</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Vertical Rich */}
<div className="mbe4">
<h2>Vertical Rich</h2>
</div>
<div className="mbe4">
<ReactTimeline
orientation="vertical"
variant="primary"
style={{
"--ag-timeline-end-align": "center",
"--ag-timeline-start-align": "center",
}}
>
<ReactTimelineItem>
<div slot="ag-start">09:00 AM</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">
<ReactCard animated rounded="md">
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "var(--ag-space-2)",
}}
>
<strong>Project Kickoff</strong>
<ReactBadge variant="success">New</ReactBadge>
</div>
<p style={{ margin: "0 0 var(--ag-space-2) 0" }}>
Initial meeting with the stakeholders to define the project
scope.
</p>
<ReactButton variant="primary" shape="rounded" size="sm">
View Details
</ReactButton>
</ReactCard>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<ReactCard animated rounded="md">
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "var(--ag-space-2)",
}}
>
<strong>Design Review</strong>
<ReactBadge variant="info">In Progress</ReactBadge>
</div>
<p style={{ margin: "0 0 var(--ag-space-2) 0" }}>
Reviewing the initial mockups with the design team.
</p>
<div style={{ display: "flex", gap: "var(--ag-space-1)" }}>
<ReactButton variant="primary" shape="rounded" size="sm">
Approve
</ReactButton>
<ReactButton
variant="primary"
shape="rounded"
size="sm"
bordered
>
Reject
</ReactButton>
</div>
</ReactCard>
</div>
<div slot="ag-marker">
<div
style={{
width: "12px",
height: "12px",
borderRadius: "50%",
background: "var(--ag-primary)",
}}
></div>
</div>
<div slot="ag-end">11:00 AM</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">02:00 PM</div>
<div slot="ag-marker">
<ReactIcon type="warning" size="24">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
</ReactIcon>
</div>
<div slot="ag-end">
<ReactCard animated rounded="md">
<div
style={{
display: "flex",
alignItems: "center",
gap: "var(--ag-space-2)",
marginBottom: "var(--ag-space-2)",
}}
>
<strong>Client Call</strong>
<ReactIconButton size="sm" label="Call Client">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.44-5.15-3.75-6.59-6.59l1.97-1.57c.26-.26.36-.65.25-1.01A11.36 11.36 0 019.64 4.44c.09-.5-.3-1.04-.8-1.04H4.4c-.56 0-1.06.48-1.07 1.05-.03 9.3 7.5 16.83 16.8 16.8.57-.01 1.05-.51 1.05-1.07v-4.4c0-.5-.54-.89-1.04-.8z" />
</svg>
</ReactIconButton>
</div>
<p style={{ margin: 0 }}>
Discuss feedback on the latest release.
</p>
</ReactCard>
</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
{/* Order Tracking Timeline */}
<div className="mbe4">
<h2>Order Tracking Timeline</h2>
<p
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.5rem",
}}
>
A real-world e-commerce order tracking timeline with custom bordered
markers and integrated components.
</p>
</div>
<div className="mbe4">
<ReactTimeline orientation="vertical" variant="monochrome">
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-background-primary-inverted)",
fontWeight: 500,
}}
>
Order Placed
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
}}
>
Mar 15, 2024 10:32 AM
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-background-primary-inverted)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style={{ color: "var(--ag-background-primary-inverted)" }}
/>
</svg>
</div>
</div>
<div slot="ag-end">
<ReactCard
style={{
background: "var(--ag-background-primary)",
borderColor: "var(--ag-background-primary-inverted)",
marginBottom: "var(--ag-space-4)",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "start",
marginBottom: "0.75rem",
}}
>
<div>
<div
style={{
color: "var(--ag-background-primary-inverted)",
fontWeight: 600,
marginBottom: "0.25rem",
}}
>
Order #AG-2024-7821
</div>
<div
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
}}
>
Thank you for your purchase!
</div>
</div>
<ReactBadge
type="success"
style={{ "--ag-badge-font-size": "0.75rem" }}
>
Confirmed
</ReactBadge>
</div>
<div
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginBottom: "0.5rem",
}}
>
Items: 3 • Total: $127.98
</div>
<ReactButton
mode="secondary"
size="small"
style={{
width: "100%",
"--ag-button-bgcolor": "transparent",
"--ag-button-border-color":
"var(--ag-background-primary-inverted)",
"--ag-button-color": "var(--ag-background-primary-inverted)",
}}
>
View Order Details
</ReactButton>
</ReactCard>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-background-primary-inverted)",
fontWeight: 500,
}}
>
Payment Verified
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
marginBottom: "var(--ag-space-4)",
}}
>
Mar 15, 2024 10:33 AM
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-background-primary-inverted)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
style={{ color: "var(--ag-background-primary-inverted)" }}
/>
</svg>
</div>
</div>
<div slot="ag-end">
<div
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.9rem",
paddingLeft: "0.5rem",
}}
>
Payment of $127.98 confirmed via ****-4242
</div>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-background-primary-inverted)",
fontWeight: 500,
}}
>
Processing
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
}}
>
Mar 15, 2024 2:15 PM
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-background-primary-inverted)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<ReactSpinner
size="small"
style={{
"--ag-spinner-color":
"var(--ag-background-primary-inverted)",
width: "14px",
height: "14px",
}}
/>
</div>
</div>
<div slot="ag-end">
<ReactCard
style={{
background: "var(--ag-background-primary)",
borderColor: "var(--ag-background-primary-inverted)",
marginBottom: "var(--ag-space-4)",
}}
>
<div
style={{
color: "var(--ag-background-primary-inverted)",
fontWeight: 500,
marginBottom: "0.5rem",
}}
>
Your order is being prepared
</div>
<div
style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}
>
<ReactBadge
type="info"
style={{ "--ag-badge-font-size": "0.75rem" }}
>
Wireless Headphones
</ReactBadge>
<ReactBadge
type="info"
style={{ "--ag-badge-font-size": "0.75rem" }}
>
USB-C Cable
</ReactBadge>
<ReactBadge
type="info"
style={{ "--ag-badge-font-size": "0.75rem" }}
>
Phone Case
</ReactBadge>
</div>
</ReactCard>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontWeight: 500,
}}
>
Shipped
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
marginBottom: "var(--ag-space-4)",
}}
>
Estimated: Mar 16
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-border)",
}}
></div>
</div>
<div slot="ag-end">
<div
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.9rem",
paddingLeft: "0.5rem",
fontStyle: "italic",
}}
>
Awaiting shipment pickup...
</div>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontWeight: 500,
}}
>
Out for Delivery
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
marginBottom: "var(--ag-space-4)",
}}
>
Estimated: Mar 18
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-border)",
}}
></div>
</div>
<div slot="ag-end">
<div
style={{
color: "var(--ag-text-secondary)",
fontSize: "0.9rem",
paddingLeft: "0.5rem",
}}
>
Your package is on the way
</div>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontWeight: 500,
}}
>
Delivered
</div>
<div
style={{
textAlign: "right",
color: "var(--ag-text-secondary)",
fontSize: "0.875rem",
marginTop: "0.25rem",
}}
>
Estimated: Mar 19
</div>
</div>
<div slot="ag-marker">
<div
style={{
width: "24px",
height: "24px",
borderRadius: "50%",
background: "var(--ag-background-primary)",
border: "2px solid var(--ag-border)",
}}
></div>
</div>
<div slot="ag-end">
<ReactCard
style={{
background: "var(--ag-background-subtle)",
borderColor: "var(--ag-border)",
marginBottom: "var(--ag-space-4)",
}}
>
<div
style={{
color: "var(--ag-text-secondary)",
marginBottom: "0.5rem",
}}
>
Package will be delivered to your address
</div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<ReactButton
mode="secondary"
size="small"
isDisabled
style={{ flex: 1 }}
>
Track Package
</ReactButton>
<ReactButton
mode="secondary"
size="small"
isDisabled
style={{ flex: 1 }}
>
Get Help
</ReactButton>
</div>
</ReactCard>
</div>
</ReactTimelineItem>
</ReactTimeline>
</div>
</section>
);
}Usage
TIP
The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:
bash
npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add TimelineThe CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.
Vue
vue
<template>
<section>
<!-- Basic Horizontal Timeline -->
<AgTimeline orientation="horizontal">
<AgTimelineItem>
<template #ag-start>2023-01-01</template>
<template #ag-marker>
<AgIcon type="success" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none"/>
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</AgIcon>
</template>
<template #ag-end>Step 1 Completed</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>2023-02-01</template>
<template #ag-marker>
<AgIcon type="info" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none"/>
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
</AgIcon>
</template>
<template #ag-end>Step 2 In Progress</template>
</AgTimelineItem>
</AgTimeline>
<!-- Vertical Timeline -->
<AgTimeline orientation="vertical" variant="primary">
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</template>
<template #ag-end>
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>10:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</template>
<template #ag-end>
<strong>Meeting</strong>
<p>Daily standup</p>
</template>
</AgTimelineItem>
</AgTimeline>
<AgTimelineItem>
<template #ag-start>Q1 2024</template>
<template #ag-marker>
<AgIcon type="success" size="18">
<svg><!-- icon svg --></svg>
</AgIcon>
</template>
<template #ag-end>Planning Phase</template>
</AgTimelineItem>
<!-- More items... -->
</AgTimeline>
</section>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { VueTimeline as AgTimeline, VueTimelineItem as AgTimelineItem } from "agnosticui-core/timeline/vue";
import { VueIcon as AgIcon } from "agnosticui-core/icon/vue";
export default defineComponent({
components: { AgTimeline, AgTimelineItem, AgIcon },
});
</script>React
tsx
import { ReactTimeline, ReactTimelineItem } from "agnosticui-core/timeline/react";
import { ReactIcon } from "agnosticui-core/icon/react";
export default function TimelineExamples() {
return (
<section>
{/* Basic Horizontal Timeline */}
<ReactTimeline orientation="horizontal">
<ReactTimelineItem>
<div slot="ag-start">2023-01-01</div>
<div slot="ag-marker">
<ReactIcon type="success" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none" />
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
</ReactIcon>
</div>
<div slot="ag-end">Step 1 Completed</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">2023-02-01</div>
<div slot="ag-marker">
<ReactIcon type="info" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none" />
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
</svg>
</ReactIcon>
</div>
<div slot="ag-end">Step 2 In Progress</div>
</ReactTimelineItem>
</ReactTimeline>
{/* Vertical Timeline */}
<ReactTimeline orientation="vertical" variant="primary">
<ReactTimelineItem>
<div slot="ag-start">09:00 AM</div>
<div slot="ag-marker">
<div style={{ width: '12px', height: '12px', borderRadius: '50%', background: 'var(--ag-primary)' }}></div>
</div>
<div slot="ag-end">
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</div>
</ReactTimelineItem>
<ReactTimelineItem>
<div slot="ag-start">10:00 AM</div>
<div slot="ag-marker">
<div style={{ width: '12px', height: '12px', borderRadius: '50%', background: 'var(--ag-primary)' }}></div>
</div>
<div slot="ag-end">
<strong>Meeting</strong>
<p>Daily standup</p>
</div>
</ReactTimelineItem>
</ReactTimeline>
<ReactTimelineItem>
<div slot="ag-start">Q1 2024</div>
<div slot="ag-marker">
<ReactIcon type="success" size="18">
<svg>{/* icon svg */}</svg>
</ReactIcon>
</div>
<div slot="ag-end">Planning Phase</div>
</ReactTimelineItem>
{/* More items... */}
</ReactTimeline>
</section>
);
}Lit (Web Components)
html
<script type="module">
import "agnosticui-core/timeline";
import "agnosticui-core/icon";
</script>
<!-- Basic Horizontal Timeline -->
<ag-timeline orientation="horizontal">
<ag-timeline-item>
<div slot="ag-start">2023-01-01</div>
<div slot="ag-marker">
<ag-icon type="success" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none"/>
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</ag-icon>
</div>
<div slot="ag-end">Step 1 Completed</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">2023-02-01</div>
<div slot="ag-marker">
<ag-icon type="info" size="18">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M0 0h24v24H0z" fill="none"/>
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
</svg>
</ag-icon>
</div>
<div slot="ag-end">Step 2 In Progress</div>
</ag-timeline-item>
</ag-timeline>
<!-- Vertical Timeline -->
<ag-timeline orientation="vertical" variant="primary">
<ag-timeline-item>
<div slot="ag-start">09:00 AM</div>
<div slot="ag-marker">
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</div>
<div slot="ag-end">
<strong>Breakfast</strong>
<p>Oatmeal and coffee</p>
</div>
</ag-timeline-item>
<ag-timeline-item>
<div slot="ag-start">10:00 AM</div>
<div slot="ag-marker">
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary);"></div>
</div>
<div slot="ag-end">
<strong>Meeting</strong>
<p>Daily standup</p>
</div>
</ag-timeline-item>
</ag-timeline>
<ag-timeline-item>
<div slot="ag-start">Q1 2024</div>
<div slot="ag-marker">
<ag-icon type="success" size="18">
<svg><!-- icon svg --></svg>
</ag-icon>
</div>
<div slot="ag-end">Planning Phase</div>
</ag-timeline-item>
<!-- More items... -->
</ag-timeline>Props
AgTimeline
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the timeline |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '' | '' | Color variant for the timeline connectors and markers |
compact | boolean | false | Uses compact spacing between timeline items |
ariaLabel | string | null | Accessible label for the timeline |
AgTimelineItem
| Slot | Description |
|---|---|
ag-start | Content positioned at the start (e.g., date, time, label) |
ag-marker | Content for the center marker (e.g., icon, badge, dot) |
ag-end | Content positioned at the end (e.g., description, details) |
CSS Custom Properties
Timeline supports extensive customization through CSS custom properties:
| Property | Default | Description |
|---|---|---|
--ag-timeline-connector-color | var(--ag-border) | Color of the connecting lines |
--ag-timeline-connector-width | 2px | Width of the connecting lines |
--ag-timeline-vertical-spacing | var(--ag-space-4) | Spacing between timeline items in vertical orientation |
--ag-timeline-start-align | flex-start | Vertical alignment for ag-start content |
--ag-timeline-end-align | flex-start | Vertical alignment for ag-end content |
Customization Example
css
/* Customize timeline appearance */
ag-timeline {
--ag-timeline-connector-color: #667eea;
--ag-timeline-connector-width: 3px;
--ag-timeline-vertical-spacing: var(--ag-space-10);
}
/* Center-align content against markers */
ag-timeline {
--ag-timeline-start-align: center;
--ag-timeline-end-align: center;
}Design Patterns
Simple Process Timeline
Use for displaying sequential steps or phases:
vue
<AgTimeline orientation="horizontal" variant="primary">
<AgTimelineItem>
<template #ag-start>Step 1</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>Research</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>Step 2</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>Design</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>Step 3</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>Launch</template>
</AgTimelineItem>
</AgTimeline>Daily Schedule Timeline
Use vertical orientation for time-based events:
vue
<AgTimeline orientation="vertical" variant="primary">
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<AgIcon type="info" size="18">
<svg><!-- icon --></svg>
</AgIcon>
</template>
<template #ag-end>
<strong>Team Standup</strong>
<p>Daily sync meeting</p>
</template>
</AgTimelineItem>
<AgTimelineItem>
<template #ag-start>11:00 AM</template>
<template #ag-marker>
<AgIcon type="success" size="18">
<svg><!-- icon --></svg>
</AgIcon>
</template>
<template #ag-end>
<strong>Code Review</strong>
<p>Review pending PRs</p>
</template>
</AgTimelineItem>
</AgTimeline>Rich Content Timeline with Cards
Combine timelines with other components for rich presentations:
vue
<AgTimeline
orientation="vertical"
variant="primary"
style="--ag-timeline-end-align: center"
>
<AgTimelineItem>
<template #ag-start>09:00 AM</template>
<template #ag-marker>
<div style="width: 12px; height: 12px; border-radius: 50%; background: var(--ag-primary)"></div>
</template>
<template #ag-end>
<AgCard animated rounded="md">
<div style="display: flex; justify-content: space-between; align-items: center;">
<strong>Project Kickoff</strong>
<AgBadge variant="success">New</AgBadge>
</div>
<p>Initial meeting with stakeholders.</p>
<AgButton variant="primary" size="sm">View Details</AgButton>
</AgCard>
</template>
</AgTimelineItem>
</AgTimeline>Accessibility
- Timeline uses semantic HTML and proper ARIA attributes for screen reader support
- Use the
ariaLabelprop to provide context about the timeline's purpose - Ensure sufficient color contrast for timeline connectors and content
- Icons used as markers should have appropriate labels or descriptions
- The component respects
prefers-reduced-motionfor any animations
Notes
- Flexible Content: Slots accept any HTML content including icons, badges, cards, and custom components
- Custom Alignment: Use CSS custom properties
--ag-timeline-start-alignand--ag-timeline-end-alignto control content positioning - Variant Colors: Variants affect both connectors and can be used to color-code different types of events
- Rich Markers: The marker slot supports any content - simple dots, icons, badges, or custom elements
- All three framework implementations (Vue, React, Lit) share the same underlying styles and behavior