skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-timeline

Display chronological events with customizable vertical and horizontal layouts in Naive UI.

8|3|Updated Mar 13, 2026
Search Tags:#timeline#layout#vue#events#ui-component#naive-ui
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-timeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-timeline
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-timeline
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-timeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Display a sequence of events or activities in chronological order with support for vertical and horizontal layouts, making timelines clear and customizable.

Core Features & Use Cases

  • Vertical and horizontal layouts with configurable item placement
  • Icon support and header/content/footer slots for rich item presentation
  • Real-world use cases include activity logs, project milestones, and process steps

Quick Start

Create a vertical timeline by rendering n-timeline and adding several n-timeline-item entries with optional icons.

Frequently Asked Questions about n-timeline

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

FAQPage Schema
How do I display events in chronological order in a Vue application?▼

To display events chronologically in Vue, use a timeline component that renders n-timeline-item entries sequentially. It supports vertical and horizontal layouts for visualizing activity logs or project milestones.

Can I customize timeline items with icons and custom content in Naive UI?▼

Yes, you can customize timeline items with icons and custom content in Naive UI. The component exposes header, content, and footer slots for rich item presentation, enabling flexible integration within your application.

Does this Vue timeline component support horizontal and vertical layouts?▼

Yes, this Vue timeline component supports both horizontal and vertical layouts. You can configure item placement dynamically, making it suitable for dashboards, activity feeds, and process step visualizations.

What is the best way to build a project milestone or activity log view in Vue?▼

The best way to build a project milestone or activity log view in Vue is using a dedicated timeline component. It provides chronological rendering with configurable item placement, icons, and rich content slots for clear visualization.

How do I start creating a vertical timeline for a dashboard?▼

To start creating a vertical timeline for a dashboard, render the n-timeline wrapper and add several n-timeline-item entries. You can include optional icons and use available slots to structure the content for your activity feed.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
dmccrearydmccreary
90

timeline-generator

Generate interactive timeline visualizations from chronological data with category filtering.

Community
Intermediate
shawnlivermoreshawnlivermore

cleen-ui-layout

Build user interfaces with @cleen/ui layout components and Tailwind conventions.

Community
Intermediate
thedaviddiasthedaviddias
228

Timeline

Display chronological events and activities in a timeline format.

Community
Intermediate