Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

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

headingLevel number 3
ARIA heading level for each event title. Clamped to 1 or greater: aria-level below 1 is invalid and is dropped by assistive technology.

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

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy