Data
DataTimeline
Vertical timeline with icon/dot markers and per-item slots.
Data
Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.
Components
<XADataTimeline />
Vertical timeline list. Each item renders an icon (or dot) on the left connected by a vertical line. Items support color, icon, title, description, time, content, and per-item named slots.
<XADataTimeline
:items="[
{
title: 'Account created',
description: 'Welcome to the platform',
time: '2 hours ago',
icon: 'i-lucide-user-plus',
color: 'success',
},
{
title: 'Payment received',
time: 'Yesterday',
icon: 'i-lucide-credit-card',
color: 'primary',
},
]"
size="md"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | array | [] | Timeline items. Each item: { title, description?, time?, datetime?, icon?, color?, content?, id? }. |
size | 'sm' | 'md' | 'lg' | 'md' | Controls icon container and text sizes. |
Item color values: primary, success, error, warning, info, neutral.
Per-item slot: #item-{index} receives { item, index }.
AI Context
component: XADataTimeline
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering a vertical timeline of ordered events with icon/dot markers, titles, descriptions, and timestamps. Use per-item #item-{index} slots for custom content.
item-shape: "{ title, description?, time?, datetime?, icon?, color?, content?, id? }"
color-values: [primary, success, error, warning, info, neutral]