Timeline

Display

A vertical list of events with status indicators, timestamps, and connecting lines.

Props

Prop	Type	Default	Description
`items`*	`DsTimelineItem[]`	—	Array of items with title, description?, date?, status?.

Examples

With statuses

Package published
Jan 12
v1.0.0 released to npm.
Documentation launched
Feb 3
Premium docs site deployed.
New components merged
Mar 5
14 new components added.
v2.0 planning
Apr
Roadmap under discussion.

vue

<DsTimeline :items="[
  { title: 'Package published', description: 'v1.0.0 released.', date: 'Jan 12', status: 'done' },
  { title: 'Docs launched',     description: 'Site deployed.',   date: 'Feb 3',  status: 'done' },
  { title: 'New components',    description: '14 new comps.',    date: 'Mar 5',  status: 'current' },
  { title: 'v2.0 planning',     date: 'Apr',  status: 'pending' },
]" />

Skeleton

Use DsTimelineSkeleton as a loading placeholder while content is being fetched.

4 items

vue

<DsTimelineSkeleton :count="4" />

2 items

vue

<DsTimelineSkeleton :count="2" />

Accessibility

Uses <ol> semantic list element.
Status dot has aria-label for screen readers.

Tag

TreeView