0
# Timeline System
1

2
Complete timeline component system for displaying chronological information with flexible positioning, styling, and content organization. Components work together to create rich temporal displays.
3

4
## Capabilities
5

6
### Timeline Container
7

8
Main container component that establishes timeline structure and positioning context.
9

10
```typescript { .api }
11
/**
12
 * Timeline container component rendered as unordered list
13
 * @param props - Timeline configuration props
14
 * @returns Timeline container element
15
 */
16
function Timeline(props: TimelineProps): JSX.Element;
17

18
interface TimelineProps extends StandardProps<React.ComponentProps<'ul'>> {
19
  /** Position of timeline items relative to the timeline axis (default: 'right') */
20
  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
21
  /** TimelineItem child components */
22
  children?: React.ReactNode;
23
  /** CSS classes for styling customization */
24
  classes?: Partial<TimelineClasses>;
25
  /** Additional CSS class name */
26
  className?: string;
27
  /** System prop for styling */
28
  sx?: SxProps<Theme>;
29
}
30

31
interface TimelineClasses {
32
  /** Class applied to the root ul element */
33
  root: string;
34
  /** Class applied when position is 'left' */
35
  positionLeft: string;
36
  /** Class applied when position is 'right' */
37
  positionRight: string;
38
  /** Class applied when position is 'alternate' */
39
  positionAlternate: string;
40
  /** Class applied when position is 'alternate-reverse' */
41
  positionAlternateReverse: string;
42
}
43
```
44

45
**Usage Example:**
46

47
```typescript
48
import React from 'react';
49
import {
50
  Timeline,
51
  TimelineItem,
52
  TimelineSeparator,
53
  TimelineConnector,
54
  TimelineContent,
55
  TimelineDot
56
} from '@mui/lab';
57

58
function BasicTimeline() {
59
  return (
60
    <Timeline position="alternate">
61
      <TimelineItem>
62
        <TimelineSeparator>
63
          <TimelineDot />
64
          <TimelineConnector />
65
        </TimelineSeparator>
66
        <TimelineContent>First Event</TimelineContent>
67
      </TimelineItem>
68
      
69
      <TimelineItem>
70
        <TimelineSeparator>
71
          <TimelineDot />
72
          <TimelineConnector />
73
        </TimelineSeparator>
74
        <TimelineContent>Second Event</TimelineContent>
75
      </TimelineItem>
76
    </Timeline>
77
  );
78
}
79
```
80

81
### TimelineItem
82

83
Individual timeline item wrapper that contains separators and content.
84

85
```typescript { .api }
86
/**
87
 * Individual timeline item rendered as list item  
88
 * @param props - Timeline item props
89
 * @returns Timeline item element
90
 */
91
function TimelineItem(props: TimelineItemProps): JSX.Element;
92

93
interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
94
  /** Override timeline position for this specific item */
95
  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
96
  /** Child components (TimelineSeparator, TimelineContent, etc.) */
97
  children?: React.ReactNode;
98
  /** CSS classes for styling customization */
99
  classes?: Partial<TimelineItemClasses>;
100
  /** System prop for styling */
101
  sx?: SxProps<Theme>;
102
}
103

104
interface TimelineItemClasses {
105
  /** Class applied to the root li element */
106
  root: string;
107
  /** Class applied when position is 'left' */
108
  positionLeft: string;
109
  /** Class applied when position is 'right' */
110
  positionRight: string;
111
  /** Class applied when position is 'alternate' */
112
  positionAlternate: string;
113
  /** Class applied when position is 'alternate-reverse' */
114
  positionAlternateReverse: string;
115
  /** Class applied to opposite content side */
116
  missingOppositeContent: string;
117
}
118
```
119

120
### TimelineContent
121

122
Content area for timeline items, extends Material-UI Typography component.
123

124
```typescript { .api }
125
/**
126
 * Content container for timeline items, extends Typography
127
 * @param props - Timeline content props extending Typography
128
 * @returns Styled typography element for timeline content
129
 */
130
function TimelineContent(props: TimelineContentProps): JSX.Element;
131

132
interface TimelineContentProps extends StandardProps<TypographyProps> {
133
  /** Content to display in timeline item */
134
  children?: React.ReactNode;
135
  /** CSS classes for styling customization */
136
  classes?: Partial<TimelineContentClasses>;
137
  /** System prop for styling */
138
  sx?: SxProps<Theme>;
139
}
140

141
interface TimelineContentClasses {
142
  /** Class applied to the root Typography element */
143
  root: string;
144
  /** Class applied when positioned on right side */
145
  positionRight: string;
146
  /** Class applied when positioned on left side */
147
  positionLeft: string;
148
  /** Class applied in alternate positioning */
149
  positionAlternate: string;
150
  /** Class applied in alternate-reverse positioning */
151
  positionAlternateReverse: string;
152
}
153
```
154

155
### TimelineDot
156

157
Dot or icon element that appears on the timeline axis.
158

159
```typescript { .api }
160
/**
161
 * Timeline dot/icon element rendered as span
162
 * @param props - Timeline dot styling and content props
163
 * @returns Styled dot element
164
 */
165
function TimelineDot(props: TimelineDotProps): JSX.Element;
166

167
interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>> {
168
  /** Content to display inside dot (icon, text, etc.) */
169
  children?: React.ReactNode;
170
  /** CSS classes for styling customization */
171
  classes?: Partial<TimelineDotClasses>;
172
  /** Color theme for the dot (default: 'grey') */
173
  color?: 'inherit' | 'grey' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
174
  /** System prop for styling */
175
  sx?: SxProps<Theme>;
176
  /** Visual style variant (default: 'filled') */
177
  variant?: 'filled' | 'outlined';
178
}
179

180
interface TimelineDotClasses {
181
  /** Class applied to the root span element */
182
  root: string;
183
  /** Classes for different color variants */
184
  colorGrey: string;
185
  colorInherit: string;
186
  colorPrimary: string;
187
  colorSecondary: string;
188
  colorError: string;
189
  colorInfo: string;
190
  colorSuccess: string;
191
  colorWarning: string;
192
  /** Classes for variant styles */
193
  variantFilled: string;
194
  variantOutlined: string;
195
}
196
```
197

198
### TimelineConnector
199

200
Connecting line between timeline items.
201

202
```typescript { .api }
203
/**
204
 * Connecting line between timeline dots rendered as span
205
 * @param props - Timeline connector props
206
 * @returns Styled connector line element
207
 */
208
function TimelineConnector(props: TimelineConnectorProps): JSX.Element;
209

210
interface TimelineConnectorProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>> {
211
  /** Optional content (typically none for simple line) */
212
  children?: React.ReactNode;
213
  /** CSS classes for styling customization */
214
  classes?: Partial<TimelineConnectorClasses>;
215
  /** System prop for styling */
216
  sx?: SxProps<Theme>;
217
}
218

219
interface TimelineConnectorClasses {
220
  /** Class applied to the root span element */
221
  root: string;
222
}
223
```
224

225
### TimelineSeparator
226

227
Container for timeline dot and connector elements.
228

229
```typescript { .api }
230
/**
231
 * Container for dot and connector elements rendered as div
232
 * @param props - Timeline separator props
233
 * @returns Container for timeline axis elements
234
 */
235
function TimelineSeparator(props: TimelineSeparatorProps): JSX.Element;
236

237
interface TimelineSeparatorProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
238
  /** Child components (typically TimelineDot and TimelineConnector) */
239
  children?: React.ReactNode;
240
  /** CSS classes for styling customization */
241
  classes?: Partial<TimelineSeparatorClasses>;
242
  /** System prop for styling */
243
  sx?: SxProps<Theme>;
244
}
245

246
interface TimelineSeparatorClasses {
247
  /** Class applied to the root div element */
248
  root: string;
249
}
250
```
251

252
### TimelineOppositeContent
253

254
Content displayed on the opposite side of the timeline from the main content.
255

256
```typescript { .api }
257
/**
258
 * Content for opposite side of timeline, extends Typography
259
 * @param props - Timeline opposite content props
260
 * @returns Typography element for opposite timeline content
261
 */
262
function TimelineOppositeContent(props: TimelineOppositeContentProps): JSX.Element;
263

264
interface TimelineOppositeContentProps extends StandardProps<TypographyProps> {
265
  /** Content to display on opposite side */
266
  children?: React.ReactNode;
267
  /** CSS classes for styling customization */
268
  classes?: Partial<TimelineOppositeContentClasses>;
269
  /** System prop for styling */
270
  sx?: SxProps<Theme>;
271
}
272

273
interface TimelineOppositeContentClasses {
274
  /** Class applied to the root Typography element */
275
  root: string;
276
  /** Class applied when positioned on right side */
277
  positionRight: string;
278
  /** Class applied when positioned on left side */
279
  positionLeft: string;
280
  /** Class applied in alternate positioning */
281
  positionAlternate: string;
282
  /** Class applied in alternate-reverse positioning */
283
  positionAlternateReverse: string;
284
}
285
```
286

287
## Timeline Patterns
288

289
### Basic Timeline
290

291
```typescript
292
import {
293
  Timeline,
294
  TimelineItem,
295
  TimelineSeparator,
296
  TimelineConnector,
297
  TimelineContent,
298
  TimelineDot
299
} from '@mui/lab';
300

301
function BasicTimeline() {
302
  return (
303
    <Timeline>
304
      <TimelineItem>
305
        <TimelineSeparator>
306
          <TimelineDot />
307
          <TimelineConnector />
308
        </TimelineSeparator>
309
        <TimelineContent>Eat</TimelineContent>
310
      </TimelineItem>
311
      
312
      <TimelineItem>
313
        <TimelineSeparator>
314
          <TimelineDot />
315
          <TimelineConnector />
316
        </TimelineSeparator>
317
        <TimelineContent>Code</TimelineContent>
318
      </TimelineItem>
319
      
320
      <TimelineItem>
321
        <TimelineSeparator>
322
          <TimelineDot />
323
        </TimelineSeparator>
324
        <TimelineContent>Sleep</TimelineContent>
325
      </TimelineItem>
326
    </Timeline>
327
  );
328
}
329
```
330

331
### Timeline with Colors and Icons
332

333
```typescript
334
import {
335
  Timeline,
336
  TimelineItem,
337
  TimelineSeparator,
338
  TimelineConnector,
339
  TimelineContent,
340
  TimelineDot,
341
  TimelineOppositeContent
342
} from '@mui/lab';
343
import {
344
  FastfoodIcon,
345
  LaptopMacIcon,
346
  HotelIcon,
347
  RepeatIcon
348
} from '@mui/icons-material';
349

350
function ColoredTimeline() {
351
  return (
352
    <Timeline position="alternate">
353
      <TimelineItem>
354
        <TimelineOppositeContent color="text.secondary">
355
          09:30 am
356
        </TimelineOppositeContent>
357
        <TimelineSeparator>
358
          <TimelineDot color="primary">
359
            <FastfoodIcon />
360
          </TimelineDot>
361
          <TimelineConnector />
362
        </TimelineSeparator>
363
        <TimelineContent>Eat</TimelineContent>
364
      </TimelineItem>
365
      
366
      <TimelineItem>
367
        <TimelineOppositeContent color="text.secondary">
368
          10:00 am
369
        </TimelineOppositeContent>
370
        <TimelineSeparator>
371
          <TimelineDot color="success">
372
            <LaptopMacIcon />
373
          </TimelineDot>
374
          <TimelineConnector />
375
        </TimelineSeparator>
376
        <TimelineContent>Code</TimelineContent>
377
      </TimelineItem>
378
    </Timeline>
379
  );
380
}
381
```
382

383
## CSS Classes
384

385
```typescript { .api }
386
// Available CSS class objects
387
const timelineClasses: TimelineClasses;
388
const timelineItemClasses: TimelineItemClasses;
389
const timelineContentClasses: TimelineContentClasses;
390
const timelineDotClasses: TimelineDotClasses;
391
const timelineConnectorClasses: TimelineConnectorClasses;
392
const timelineSeparatorClasses: TimelineSeparatorClasses;
393
const timelineOppositeContentClasses: TimelineOppositeContentClasses;
394
```