1# Timeline
2 
3A component that displays a sequence of events with dates, titles, icons or avatars.
4 
5## Key Props
6 
7- `items`: as an array of objects with the following properties:
8 
9- `date?: string`{lang="ts-type"}
10- `title?: string`{lang="ts-type"}
11- `description?: AvatarProps`{lang="ts-type"}
12- `icon?: string`{lang="ts-type"}
13- `avatar?: AvatarProps`{lang="ts-type"}
14- `value?: string | number`{lang="ts-type"}
15- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
16- `class?: any`{lang="ts-type"}
17- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
18 
19## ::component-code
20 
21ignore:
22 
23- items
24- class
25- defaultValue
26  external:
27- items
28  externalTypes:
29- TimelineItem[]
30  props:
31  defaultValue: 2
32  items: - date: 'Mar 15, 2025'
33  title: 'Project Kickoff'
34  description: 'Kicked off the project with team alignment.
35- `color`: to change the color of the active items in a Timeline.
36- `size`: to change the size of the Timeline.
37- `orientation`: to change the orientation of the Timeline.
38- `ui`: to create a Timeline with alternating layout.
39- `slot`:
40 
41## Events
42 
43- `@select`: Emitted when an item is selected (v4.4+)
44 
45## Usage
46 
47```vue
48<UTimeline
49  :items="items"
50  @select="handleSelect"
51/>
52```
53