Timeline

Vertical timeline with dated events.

Components

Timeline

data

static

<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, but be 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

Major release with new component library.

Public beta opened for early adopters.

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

heading-level number =3

TimelineItem

<arc-timeline-item>

Individual event within a Timeline.

description: Description from slotted text content
heading string ='': Event heading
date string ='': Date string to display

Timeline

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

TimelineItem

See Also

Docs

Project

Arclight