FeaturedNew
TimelineAlternating Timeline
Entries zig-zag either side of a centre line on desktop and collapse to one column on phones.
#timeline#alternating#zigzag
3 frameworksIntermediate
Loading…
A plain vertical rail with a dot, time, title and description per entry - the default timeline.
<!--
The rail is the list's own inline-start border, so it flips with the document
direction; the dot is pulled onto it with -start-1.5 (half its width). Each
dot is absolutely positioned but has no top set: with no offset an absolute
box keeps the vertical spot it would have had in flow, so it tracks its <li>.
-->
<ol class="relative mx-auto w-full max-w-2xl border-s border-gray-200 dark:border-gray-800">
<li class="ms-6 pb-8 last:pb-0">
<span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
<time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">March 2026</time>
<h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Series A closed</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Raised $12M to grow the platform and support teams.</p>
</li>
<li class="ms-6 pb-8 last:pb-0">
<span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
<time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">May 2026</time>
<h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Shipped v2</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">A full rebuild of the editor and a new sync engine.</p>
</li>
<li class="ms-6 pb-8 last:pb-0">
<span class="absolute -start-1.5 mt-1 h-3 w-3 rounded-full border-2 border-white bg-blue-600 dark:border-gray-950 dark:bg-blue-500" aria-hidden="true"></span>
<time class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">July 2026</time>
<h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">10,000 teams</h3>
<p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Crossed ten thousand active workspaces worldwide.</p>
</li>
</ol>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | TimelineItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
The rail is the list’s own `border-s`, so it flips for RTL, and each dot is pulled onto it with `-start-1.5`. Swap `bg-blue-600` on the dots for any accent, or widen `max-w-2xl` to give descriptions more room.