el-timeline

Name: el-timeline
Availability: InStock
Author: jiaiyan

Render chronological timelines with el-timeline and el-timeline-item components.

21|2|Updated Mar 13, 2026

Search Tags:#timeline #component #vue3 #element-plus #ui-component #timeline-item

Ready to run

npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-timeline

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: el-timeline
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-timeline
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-timeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Timeline visualization solves the need to present chronological activities in an intuitive, at-a-glance format, replacing long lists with a clear sequence.

Core Features & Use Cases

Render timelines with el-timeline and el-timeline-item to display events with timestamps.
Support modes, custom node colors and icons, and reverse ordering for flexible storytelling.
Use cases include activity histories, process logs, version histories, and event-driven dashboards.

Quick Start

Create an el-timeline with multiple items, each with a timestamp to visualize a sequence of events.

Frequently Asked Questions about el-timeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I display a chronological timeline of events in Vue 3?▼

To display a chronological timeline in Vue 3, use the el-timeline and el-timeline-item components to render events with timestamps. This approach replaces long lists with a clear visual sequence for activity logs.

Can I customize node colors and timestamps in an Element Plus timeline?▼

Yes, the Element Plus timeline supports custom node colors and icons, mode variations, and timestamp placement options. You can configure these settings on the el-timeline-item component for flexible storytelling.

What is the best way to show a release history or activity log in a dashboard?▼

The best way to show a release history in a dashboard is using a timeline component to present chronological activities in an intuitive format. This provides an at-a-glance visual sequence of events.

How do I reverse the order of items in a Vue 3 timeline component?▼

You can reverse the order of items in a Vue 3 timeline using the reverse ordering feature supported by the el-timeline component. This allows you to display the latest events at the top of the sequence.

Does the el-timeline component support different sizes and mode variations?▼

Yes, the el-timeline component supports different size options and mode variations for flexible presentation. These features allow you to adapt the visual sequencing of events to various dashboard layouts.