Timeline
Vertical timeline with dated events.
<arc-timeline>Overview
Timeline renders a vertical sequence of events connected by a dotted line, suitable for changelogs, activity feeds, project histories, and audit logs. Each event displays a heading, optional description, and optional date in a clean layout with a blue dot marker and a connecting vertical line. The last item's line is automatically hidden to cap the timeline cleanly.
Like Stepper, Timeline uses a declarative child-element API: nest <arc-timeline-item> elements with heading, date, and text content (accessed via the description getter which reads textContent). The parent collects children via slotchange and renders the visual timeline, keeping markup readable and data management simple.
The dot marker uses --accent-primary with a double-ring effect (2px --bg-card border surrounded by a 1px --accent-primary-border box shadow) for a polished appearance. The date is rendered in accent font (--font-accent) at 11px in --text-ghost color, giving it a subtle, metadata-like treatment. The timeline renders as a semantic <ol> with role="list" for correct ordering and accessibility.
Guidelines
When to use
- Use for chronologically ordered events: changelogs, activity logs, project history
- Include dates for every item when the timeline represents real events
- Order items chronologically (most recent first or earliest first) and stay consistent
- Keep headings concise and event descriptions to one or two sentences
- Use inside a card or sidebar for contextual activity feeds
When not to use
- Do not use timeline for non-sequential content. It implies chronological ordering
- Do not mix items with and without dates randomly. Be consistent across all items
- Do not use more than 10-15 items without pagination or a "show more" pattern
- Do not use timeline as a stepper. Stepper is for workflow progress, timeline is for history
- Do not put interactive elements (buttons, forms) inside timeline items. Keep them read-only
Features
- Vertical event sequence with blue dot markers and connecting lines
- Declarative `<arc-timeline-item>` children with heading, date, and text content
- Double-ring dot marker using border and box-shadow for a polished appearance
- Automatic hiding of the last item connecting line for clean termination
- Monospace date display in `--text-ghost` color for subtle metadata treatment
- Semantic <ol> with `role="list"` for accessible ordered event representation
- CSS parts (timeline, item, marker, dot, line, content, title, description, date)
- Description read from textContent of child elements for flexible content
Preview
-
v2.0 Released
Major release with new component library.
-
Beta Launch
Public beta opened for early adopters.
-
Project Started
Initial commit and architecture planning.
Usage
<arc-timeline>
<arc-timeline-item heading="Project started" date="2026-01-15">Initial setup</arc-timeline-item>
<arc-timeline-item heading="First release" date="2026-02-01">v1.0 shipped</arc-timeline-item>
</arc-timeline>import { Timeline, TimelineItem } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Timeline>
<TimelineItem heading="Project started" date="2026-01-15">Initial setup</TimelineItem>
<TimelineItem heading="First release" date="2026-02-01">v1.0 shipped</TimelineItem>
</Timeline>
);
}<script setup>
import { Timeline, TimelineItem } from '@arclux/arc-ui-vue';
</script>
<template>
<Timeline>
<TimelineItem heading="Project started" date="2026-01-15">Initial setup</TimelineItem>
<TimelineItem heading="First release" date="2026-02-01">v1.0 shipped</TimelineItem>
</Timeline>
</template><script>
import { Timeline, TimelineItem } from '@arclux/arc-ui-svelte';
</script>
<Timeline>
<TimelineItem heading="Project started" date="2026-01-15">Initial setup</TimelineItem>
<TimelineItem heading="First release" date="2026-02-01">v1.0 shipped</TimelineItem>
</Timeline>import { Component } from '@angular/core';
import { Timeline, TimelineItem } from '@arclux/arc-ui-angular';
@Component({
imports: [Timeline, TimelineItem],
template: `
<arc-timeline>
<arc-timeline-item heading="Project started" date="2026-01-15">Initial setup</arc-timeline-item>
<arc-timeline-item heading="First release" date="2026-02-01">v1.0 shipped</arc-timeline-item>
</arc-timeline>
`,
})
export class MyComponent {}import { Timeline, TimelineItem } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Timeline>
<TimelineItem heading="Project started" date="2026-01-15">Initial setup</TimelineItem>
<TimelineItem heading="First release" date="2026-02-01">v1.0 shipped</TimelineItem>
</Timeline>
);
}import { Timeline, TimelineItem } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Timeline>
<TimelineItem heading="Project started" date="2026-01-15">Initial setup</TimelineItem>
<TimelineItem heading="First release" date="2026-02-01">v1.0 shipped</TimelineItem>
</Timeline>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-timeline — requires timeline.css + base.css (or arc-ui.css) -->
<div class="arc-timeline">
<div class="timeline__slot-host">
Timeline
</div>
<ol class="timeline" role="list">
_items
</ol>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-timeline — self-contained, no external CSS needed -->
<div class="arc-timeline" style="display: block">
<div style="display: none">
Timeline
</div>
<ol style="display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none" role="list">
_items
</ol>
</div>API
headingLevelnumber3- ARIA heading level for each event title. Clamped to 1 or greater:
aria-levelbelow 1 is invalid and is dropped by assistive technology.
TimelineItem
<arc-timeline-item>Individual event within a Timeline.
description- Description from slotted text content
headingstring''- Event heading
datestring''- Date string to display