Timeline — ARC UI

Components

Timeline

data

static

<arc-timeline>

Overview

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

Use timeline for non-sequential content — it implies chronological ordering
Mix items with and without dates randomly — be consistent across all items
Use more than 10-15 items without pagination or a "show more" pattern
Use timeline as a stepper — stepper is for workflow progress, timeline is for history
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 colour 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';

<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: `
    <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>
  `,
})
export class MyComponent {}

import { Timeline, TimelineItem } from '@arclux/arc-ui-solid';

<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';

<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>

TimelineItem

<arc-timeline-item>

Individual event within a Timeline.

Prop	Type	Default	Description
`heading`	`string`	—	Event heading
`date`	`string`	—	Date string to display