Timeline

Matches Arco Timeline with primary dots; timestamp maps to label. See the Element Plus docs for props.

Basic Timeline

Timestamp appears below the content by default, matching Arco's label.

• Project created

  2026-10-20
• Design reviewed

  2026-10-21
• Release published

  2026-10-22

<template>
  <el-timeline style="width: 100%">
    <el-timeline-item timestamp="2026-10-20">Project created</el-timeline-item>
    <el-timeline-item timestamp="2026-10-21">Design reviewed</el-timeline-item>
    <el-timeline-item timestamp="2026-10-22">Release published</el-timeline-item>
  </el-timeline>
</template>

Colors & Extended Dots

Type and hollow map to Arco colors and hollow dots; large, icons and top timestamps keep Element Plus extensions.

• Completed
• Needs attention
• In progress
• 2026-10-24

  Next milestone

<script setup lang="ts">
import { MoreFilled } from '@element-plus/icons-vue'
</script>

<template>
  <el-timeline style="width: 100%">
    <el-timeline-item type="success">Completed</el-timeline-item>
    <el-timeline-item type="danger">Needs attention</el-timeline-item>
    <el-timeline-item type="primary" hollow>In progress</el-timeline-item>
    <el-timeline-item size="large" :icon="MoreFilled" timestamp="2026-10-24" placement="top">Next milestone</el-timeline-item>
  </el-timeline>
</template>

Differences from Arco

• Top timestamps and large dots have no Arco equivalent; they retain the layout or extend the size scale.