diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.js b/docs/data/material/components/timeline/LeftAlignedTimeline.js
new file mode 100644
index 00000000000000..8daa4d4d97014a
--- /dev/null
+++ b/docs/data/material/components/timeline/LeftAlignedTimeline.js
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineOppositeContent, {
+ timelineOppositeContentClasses,
+} from '@mui/lab/TimelineOppositeContent';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+ 09:30 am
+
+
+
+
+
+ Eat
+
+
+
+ 10:00 am
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx b/docs/data/material/components/timeline/LeftAlignedTimeline.tsx
new file mode 100644
index 00000000000000..8daa4d4d97014a
--- /dev/null
+++ b/docs/data/material/components/timeline/LeftAlignedTimeline.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineOppositeContent, {
+ timelineOppositeContentClasses,
+} from '@mui/lab/TimelineOppositeContent';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+ 09:30 am
+
+
+
+
+
+ Eat
+
+
+
+ 10:00 am
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/NoOppositeContent.js b/docs/data/material/components/timeline/NoOppositeContent.js
new file mode 100644
index 00000000000000..034b5dd6305874
--- /dev/null
+++ b/docs/data/material/components/timeline/NoOppositeContent.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+
+
+
+ Eat
+
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/NoOppositeContent.tsx b/docs/data/material/components/timeline/NoOppositeContent.tsx
new file mode 100644
index 00000000000000..034b5dd6305874
--- /dev/null
+++ b/docs/data/material/components/timeline/NoOppositeContent.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+
+
+
+ Eat
+
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.js b/docs/data/material/components/timeline/RightAlignedTimeline.js
new file mode 100644
index 00000000000000..6fbd295a6e2f0f
--- /dev/null
+++ b/docs/data/material/components/timeline/RightAlignedTimeline.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+ 09:30 am
+
+
+
+
+
+ Eat
+
+
+
+ 10:00 am
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.tsx b/docs/data/material/components/timeline/RightAlignedTimeline.tsx
new file mode 100644
index 00000000000000..6fbd295a6e2f0f
--- /dev/null
+++ b/docs/data/material/components/timeline/RightAlignedTimeline.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
+
+export default function OppositeContentTimeline() {
+ return (
+
+
+
+
+ 09:30 am
+
+
+
+
+
+ Eat
+
+
+
+ 10:00 am
+
+
+
+
+ Code
+
+
+
+ );
+}
diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md
index ada9b75989398d..7eb74ddbc1f6c3 100644
--- a/docs/data/material/components/timeline/timeline.md
+++ b/docs/data/material/components/timeline/timeline.md
@@ -54,3 +54,25 @@ Here is an example of customizing the component.
You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
{{"demo": "CustomizedTimeline.js"}}
+
+## Alignment
+
+There are different ways in which a Timeline can be placed within the container.
+
+You can do it by overriding the styles.
+
+A Timeline centers itself in the container by default.
+
+The demos below show how to adjust the relative width of the left and right sides of a Timeline:
+
+### Left-aligned
+
+{{"demo": "LeftAlignedTimeline.js"}}
+
+### Right-aligned
+
+{{"demo": "RightAlignedTimeline.js"}}
+
+### Left-aligned with no opposite content
+
+{{"demo": "NoOppositeContent.js"}}