Timeline

Vertical event flow. Semantic <ol> list where document order equals time order.

Basic usage

Basic

1. 2026-09-01

   Kickoff review
2. 2026-09-15

   Phase one delivered
3. 2026-09-25

   Under acceptance

<script setup lang="ts">
</script>

<template>
  <!-- Basic timeline -->
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Kickoff review</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Phase one delivered</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Under acceptance</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- Basic timeline -->
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Kickoff review</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Phase one delivered</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Under acceptance</LhTimelineItem>
  </LhTimeline>
</template>

Alternate layout and hollow dots

mode="alternate" places items on both sides of the axis; hollow renders a dot as a hollow circle, typically for pending states.

Alternate

1. Q1

   Planning
2. Q2

   Development
3. Q3

   Load testing

Hollow

1. Q1

   Not started
2. Q2

   In progress
3. Q3

   Done

<script setup lang="ts">
</script>

<template>
  <!-- Alternate layout -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planning</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Development</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Load testing</LhTimelineItem>
  </LhTimeline>
  <!-- Hollow dots -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Not started</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">In progress</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Done</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- Alternate layout -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Planning</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Development</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Load testing</LhTimelineItem>
  </LhTimeline>
  <!-- Hollow dots -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Not started</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">In progress</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Done</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

Attribute	Description	Type	Default
mode	Layout mode	"left" | "alternate"	'left'
sx	Quick layout props	LhSxProps	—

LhTimelineItem Props

Attribute	Description	Type	Default
timestamp	Timestamp	string	—
type	Node semantic type	'primary' | 'success' | 'warning' | 'danger'	—
hollow	Hollow dot	boolean	false
sx	Quick layout props	LhSxProps	—

Slots: default, timestamp, dot.

Accessibility

• Semantic <ol>; screen readers announce items in time order
• Dots are decorative (aria-hidden="true")

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/timeline/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhTimelineItemProps

export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  sx?: LhSxProps
}

LhTimelineProps

export interface LhTimelineProps {
  mode?: LhTimelineMode
  sx?: LhSxProps
}

LhTimelineMode _{(from @lh-ui/share/core/timeline)}

export type LhTimelineMode = 'left' | 'alternate'