diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
new file mode 100644
index 000000000..7e3607560
--- /dev/null
+++ b/doc/stepper/LinearDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Stepper consists of one or more StepperPanel elements.</p>
+    </DocSectionText>
+    <div class="card">
+        <Stepper v-model:activeStep="active" linear>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            code: {
+                basic: `
+<Stepper>
+    <StepperPanel header="Header I">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <template #content="{ prevCallback, nextCallback }">
+            <div class="flex flex-column h-12rem">
+                <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+            </div>
+            <div class="flex pt-4 justify-content-between">
+                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+            </div>
+        </template>
+    </StepperPanel>
+</Stepper>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Stepper>
+            <StepperPanel header="Header I">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <template #content="{ prevCallback, nextCallback }">
+                    <div class="flex flex-column h-12rem">
+                        <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div class="flex pt-4 justify-content-between">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
+                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    </div>
+                </template>
+            </StepperPanel>
+        </Stepper>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/stepper/ExampleDoc.vue b/doc/stepper/TemplateDoc.vue
similarity index 100%
rename from doc/stepper/ExampleDoc.vue
rename to doc/stepper/TemplateDoc.vue
diff --git a/pages/stepper/index.vue b/pages/stepper/index.vue
index cfdbf170e..6798e5b48 100644
--- a/pages/stepper/index.vue
+++ b/pages/stepper/index.vue
@@ -13,8 +13,9 @@
 <script>
 import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/stepper/BasicDoc.vue';
-import ExampleDoc from '@/doc/stepper/ExampleDoc.vue';
 import ImportDoc from '@/doc/stepper/ImportDoc.vue';
+import LinearDoc from '@/doc/stepper/LinearDoc.vue';
+import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
 import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
 import PTComponent from '@/doc/stepper/pt/index.vue';
 import ThemingDoc from '@/doc/stepper/theming/index.vue';
@@ -39,9 +40,14 @@ export default {
                     component: VerticalDoc
                 },
                 {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
+                    id: 'linear',
+                    label: 'Linear',
+                    component: LinearDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
                 },
                 {
                     id: 'accessibility',