diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index efce4d812..d1d6512b1 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -451,14 +451,6 @@
                             "name": "MeterGroup",
                             "to": "/metergroup"
                         },
-                        {
-                            "name": "ScrollTop",
-                            "to": "/scrolltop"
-                        },
-                        {
-                            "name": "Skeleton",
-                            "to": "/skeleton"
-                        },
                         {
                             "name": "ProgressBar",
                             "to": "/progressbar"
@@ -467,6 +459,14 @@
                             "name": "ProgressSpinner",
                             "to": "/progressspinner"
                         },
+                        {
+                            "name": "ScrollTop",
+                            "to": "/scrolltop"
+                        },
+                        {
+                            "name": "Skeleton",
+                            "to": "/skeleton"
+                        },
                         {
                             "name": "Ripple",
                             "to": "/ripple"
diff --git a/apps/showcase/doc/autocomplete/pt/PTImage.vue b/apps/showcase/doc/autocomplete/pt/PTImage.vue
deleted file mode 100644
index 5fd86d5f3..000000000
--- a/apps/showcase/doc/autocomplete/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/autocomplete.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/autocomplete/pt/PTViewer.vue b/apps/showcase/doc/autocomplete/pt/PTViewer.vue
new file mode 100644
index 000000000..094a54f41
--- /dev/null
+++ b/apps/showcase/doc/autocomplete/pt/PTViewer.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            docs: [
+                {
+                    data: getPTOptions('AutoComplete'),
+                    key: 'AutoComplete'
+                }
+            ]
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/autocomplete/pt/index.vue b/apps/showcase/doc/autocomplete/pt/index.vue
index 07e2c9cbb..27eea60c2 100644
--- a/apps/showcase/doc/autocomplete/pt/index.vue
+++ b/apps/showcase/doc/autocomplete/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.autocomplete',
diff --git a/apps/showcase/doc/cascadeselect/pt/PTImage.vue b/apps/showcase/doc/cascadeselect/pt/PTImage.vue
deleted file mode 100644
index 79e75d433..000000000
--- a/apps/showcase/doc/cascadeselect/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/cascadeselect.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/cascadeselect/pt/PTViewer.vue b/apps/showcase/doc/cascadeselect/pt/PTViewer.vue
new file mode 100644
index 000000000..ed61ec832
--- /dev/null
+++ b/apps/showcase/doc/cascadeselect/pt/PTViewer.vue
@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('CascadeSelect'),
+                    key: 'CascadeSelect'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/cascadeselect/pt/index.vue b/apps/showcase/doc/cascadeselect/pt/index.vue
index e8a5f1e93..5c1d70e49 100644
--- a/apps/showcase/doc/cascadeselect/pt/index.vue
+++ b/apps/showcase/doc/cascadeselect/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.cascadeselect',
diff --git a/apps/showcase/doc/checkbox/pt/PTImage.vue b/apps/showcase/doc/checkbox/pt/PTImage.vue
deleted file mode 100644
index c07b89666..000000000
--- a/apps/showcase/doc/checkbox/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/checkbox.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/checkbox/pt/PTViewer.vue b/apps/showcase/doc/checkbox/pt/PTViewer.vue
new file mode 100644
index 000000000..36c8f0735
--- /dev/null
+++ b/apps/showcase/doc/checkbox/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Checkbox v-model="checked" :binary="true" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            docs: [
+                {
+                    data: getPTOptions('Checkbox'),
+                    key: 'Checkbox'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/checkbox/pt/index.vue b/apps/showcase/doc/checkbox/pt/index.vue
index 5de9a3a70..c0513276d 100644
--- a/apps/showcase/doc/checkbox/pt/index.vue
+++ b/apps/showcase/doc/checkbox/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.checkbox',
diff --git a/apps/showcase/doc/colorpicker/pt/PTImage.vue b/apps/showcase/doc/colorpicker/pt/PTImage.vue
deleted file mode 100644
index 886553ce6..000000000
--- a/apps/showcase/doc/colorpicker/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/colorpicker.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/colorpicker/pt/PTViewer.vue b/apps/showcase/doc/colorpicker/pt/PTViewer.vue
new file mode 100644
index 000000000..3597b759a
--- /dev/null
+++ b/apps/showcase/doc/colorpicker/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <ColorPicker v-model="color" inline />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            color: null,
+            docs: [
+                {
+                    data: getPTOptions('ColorPicker'),
+                    key: 'ColorPicker'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/colorpicker/pt/index.vue b/apps/showcase/doc/colorpicker/pt/index.vue
index cfc9ea403..0fe6d6259 100644
--- a/apps/showcase/doc/colorpicker/pt/index.vue
+++ b/apps/showcase/doc/colorpicker/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.colorpicker',
diff --git a/apps/showcase/doc/confirmdialog/pt/index.vue b/apps/showcase/doc/confirmdialog/pt/index.vue
index 7478549b9..6742e92e8 100644
--- a/apps/showcase/doc/confirmdialog/pt/index.vue
+++ b/apps/showcase/doc/confirmdialog/pt/index.vue
@@ -21,6 +21,7 @@ export default {
                     id: 'pt.image',
                     label: 'Wireframe',
                     component: PTImage
+                    label: 'Viewer',
                 },
                 {
                     id: 'pt.doc.confirmdialog',
diff --git a/apps/showcase/doc/datepicker/pt/PTImage.vue b/apps/showcase/doc/datepicker/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/datepicker/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/datepicker/pt/PTViewer.vue b/apps/showcase/doc/datepicker/pt/PTViewer.vue
new file mode 100644
index 000000000..7973527b0
--- /dev/null
+++ b/apps/showcase/doc/datepicker/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <DatePicker v-model="date" showIcon fluid iconDisplay="input" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            date: null,
+            docs: [
+                {
+                    data: getPTOptions('DatePicker'),
+                    key: 'DatePicker'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/datepicker/pt/index.vue b/apps/showcase/doc/datepicker/pt/index.vue
index cf55ae326..814cd4721 100644
--- a/apps/showcase/doc/datepicker/pt/index.vue
+++ b/apps/showcase/doc/datepicker/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.datepicker',
diff --git a/apps/showcase/doc/editor/pt/PTImage.vue b/apps/showcase/doc/editor/pt/PTImage.vue
deleted file mode 100644
index 49f1e11a7..000000000
--- a/apps/showcase/doc/editor/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/editor.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/editor/pt/PTViewer.vue b/apps/showcase/doc/editor/pt/PTViewer.vue
new file mode 100644
index 000000000..8d3ad030b
--- /dev/null
+++ b/apps/showcase/doc/editor/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Editor v-model="value" editorStyle="height: 320px" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Editor'),
+                    key: 'Editor'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/editor/pt/index.vue b/apps/showcase/doc/editor/pt/index.vue
index e5044179e..93d1b1c67 100644
--- a/apps/showcase/doc/editor/pt/index.vue
+++ b/apps/showcase/doc/editor/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.editor',
diff --git a/apps/showcase/doc/floatlabel/pt/PTImage.vue b/apps/showcase/doc/floatlabel/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/floatlabel/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/floatlabel/pt/PTViewer.vue b/apps/showcase/doc/floatlabel/pt/PTViewer.vue
new file mode 100644
index 000000000..63daa6ed0
--- /dev/null
+++ b/apps/showcase/doc/floatlabel/pt/PTViewer.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <FloatLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('FloatLabel'),
+                    key: 'FloatLabel'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/floatlabel/pt/index.vue b/apps/showcase/doc/floatlabel/pt/index.vue
index dab994c74..cd4dff0ab 100644
--- a/apps/showcase/doc/floatlabel/pt/index.vue
+++ b/apps/showcase/doc/floatlabel/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.floatlabel',
diff --git a/apps/showcase/doc/iconfield/pt/PTImage.vue b/apps/showcase/doc/iconfield/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/iconfield/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/iconfield/pt/PTViewer.vue b/apps/showcase/doc/iconfield/pt/PTViewer.vue
new file mode 100644
index 000000000..36b55d087
--- /dev/null
+++ b/apps/showcase/doc/iconfield/pt/PTViewer.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value" placeholder="Search" />
+        </IconField>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('IconField'),
+                    key: 'IconField'
+                },
+                {
+                    data: getPTOptions('InputIcon'),
+                    key: 'InputIcon'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/iconfield/pt/index.vue b/apps/showcase/doc/iconfield/pt/index.vue
index 49d396d0d..78cac3fb1 100644
--- a/apps/showcase/doc/iconfield/pt/index.vue
+++ b/apps/showcase/doc/iconfield/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.iconfield',
diff --git a/apps/showcase/doc/iconfield/theming/pt/PTImage.vue b/apps/showcase/doc/iconfield/theming/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/iconfield/theming/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/iconfield/theming/pt/index.vue b/apps/showcase/doc/iconfield/theming/pt/index.vue
deleted file mode 100644
index d51b69df8..000000000
--- a/apps/showcase/doc/iconfield/theming/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>IconField Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.iconfield',
-                    label: 'IconField PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('IconField')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/iftalabel/pt/PTImage.vue b/apps/showcase/doc/iftalabel/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/iftalabel/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/iftalabel/pt/PTViewer.vue b/apps/showcase/doc/iftalabel/pt/PTViewer.vue
new file mode 100644
index 000000000..be02c8395
--- /dev/null
+++ b/apps/showcase/doc/iftalabel/pt/PTViewer.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('IftaLabel'),
+                    key: 'IftaLabel'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/iftalabel/pt/index.vue b/apps/showcase/doc/iftalabel/pt/index.vue
index d90c8f5e7..fd0901c1f 100644
--- a/apps/showcase/doc/iftalabel/pt/index.vue
+++ b/apps/showcase/doc/iftalabel/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.iftalabel',
diff --git a/apps/showcase/doc/inputgroup/pt/PTImage.vue b/apps/showcase/doc/inputgroup/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/inputgroup/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inputgroup/pt/PTViewer.vue b/apps/showcase/doc/inputgroup/pt/PTViewer.vue
new file mode 100644
index 000000000..bc275bcbe
--- /dev/null
+++ b/apps/showcase/doc/inputgroup/pt/PTViewer.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputNumber v-model="value" placeholder="Price" />
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputGroup'),
+                    key: 'InputGroup'
+                },
+                {
+                    data: getPTOptions('InputGroupAddon'),
+                    key: 'InputGroupAddon'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputgroup/pt/index.vue b/apps/showcase/doc/inputgroup/pt/index.vue
index 5f3b433d9..deee59d33 100644
--- a/apps/showcase/doc/inputgroup/pt/index.vue
+++ b/apps/showcase/doc/inputgroup/pt/index.vue
@@ -12,16 +12,16 @@
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
 // import PtDoc from './PTDoc.vue';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.inputgroup',
diff --git a/apps/showcase/doc/inputmask/pt/PTImage.vue b/apps/showcase/doc/inputmask/pt/PTImage.vue
deleted file mode 100644
index 84c3ab283..000000000
--- a/apps/showcase/doc/inputmask/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputmask.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inputmask/pt/PTViewer.vue b/apps/showcase/doc/inputmask/pt/PTViewer.vue
new file mode 100644
index 000000000..eda147a7d
--- /dev/null
+++ b/apps/showcase/doc/inputmask/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputMask'),
+                    key: 'InputMask'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputmask/pt/index.vue b/apps/showcase/doc/inputmask/pt/index.vue
index fcc02a1df..dc8e7bb1e 100644
--- a/apps/showcase/doc/inputmask/pt/index.vue
+++ b/apps/showcase/doc/inputmask/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.inputmask',
diff --git a/apps/showcase/doc/inputnumber/pt/PTImage.vue b/apps/showcase/doc/inputnumber/pt/PTImage.vue
deleted file mode 100644
index c106bf166..000000000
--- a/apps/showcase/doc/inputnumber/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputnumber.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inputnumber/pt/PTViewer.vue b/apps/showcase/doc/inputnumber/pt/PTViewer.vue
new file mode 100644
index 000000000..12b425ea8
--- /dev/null
+++ b/apps/showcase/doc/inputnumber/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 20,
+            docs: [
+                {
+                    data: getPTOptions('InputNumber'),
+                    key: 'InputNumber'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputnumber/pt/index.vue b/apps/showcase/doc/inputnumber/pt/index.vue
index 8de848321..26a4690ca 100644
--- a/apps/showcase/doc/inputnumber/pt/index.vue
+++ b/apps/showcase/doc/inputnumber/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.inputnumber',
diff --git a/apps/showcase/doc/inputotp/pt/PTImage.vue b/apps/showcase/doc/inputotp/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/inputotp/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inputotp/pt/PTViewer.vue b/apps/showcase/doc/inputotp/pt/PTViewer.vue
new file mode 100644
index 000000000..1e5580bca
--- /dev/null
+++ b/apps/showcase/doc/inputotp/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputOtp v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputOtp'),
+                    key: 'InputOtp'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputotp/pt/index.vue b/apps/showcase/doc/inputotp/pt/index.vue
index c7b6c7162..3c7eb3b73 100644
--- a/apps/showcase/doc/inputotp/pt/index.vue
+++ b/apps/showcase/doc/inputotp/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.inputotp',
diff --git a/apps/showcase/doc/inputtext/pt/PTImage.vue b/apps/showcase/doc/inputtext/pt/PTImage.vue
deleted file mode 100644
index 0b3d4b84b..000000000
--- a/apps/showcase/doc/inputtext/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputtext.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inputtext/pt/PTViewer.vue b/apps/showcase/doc/inputtext/pt/PTViewer.vue
new file mode 100644
index 000000000..a1d00a194
--- /dev/null
+++ b/apps/showcase/doc/inputtext/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputText v-model="value" placeholder="Username" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputText'),
+                    key: 'InputText'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inputtext/pt/index.vue b/apps/showcase/doc/inputtext/pt/index.vue
index 89c39f8e2..18c527d0b 100644
--- a/apps/showcase/doc/inputtext/pt/index.vue
+++ b/apps/showcase/doc/inputtext/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.inputtext',
diff --git a/apps/showcase/doc/knob/pt/PTImage.vue b/apps/showcase/doc/knob/pt/PTImage.vue
deleted file mode 100644
index cb40ebd7f..000000000
--- a/apps/showcase/doc/knob/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/knob.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/knob/pt/PTViewer.vue b/apps/showcase/doc/knob/pt/PTViewer.vue
new file mode 100644
index 000000000..22a6f38d5
--- /dev/null
+++ b/apps/showcase/doc/knob/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Knob v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 0,
+            docs: [
+                {
+                    data: getPTOptions('Knob'),
+                    key: 'Knob'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/knob/pt/index.vue b/apps/showcase/doc/knob/pt/index.vue
index fded4fef3..d6f783749 100644
--- a/apps/showcase/doc/knob/pt/index.vue
+++ b/apps/showcase/doc/knob/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.knob',
diff --git a/apps/showcase/doc/listbox/pt/PTImage.vue b/apps/showcase/doc/listbox/pt/PTImage.vue
deleted file mode 100644
index 592b4384d..000000000
--- a/apps/showcase/doc/listbox/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/listbox.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/listbox/pt/PTViewer.vue b/apps/showcase/doc/listbox/pt/PTViewer.vue
new file mode 100644
index 000000000..f7a41de12
--- /dev/null
+++ b/apps/showcase/doc/listbox/pt/PTViewer.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Listbox'),
+                    key: 'Listbox'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/listbox/pt/index.vue b/apps/showcase/doc/listbox/pt/index.vue
index b21248035..a159d9a7f 100644
--- a/apps/showcase/doc/listbox/pt/index.vue
+++ b/apps/showcase/doc/listbox/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.listbox',
diff --git a/apps/showcase/doc/multiselect/pt/PTImage.vue b/apps/showcase/doc/multiselect/pt/PTImage.vue
deleted file mode 100644
index 7bbe81de6..000000000
--- a/apps/showcase/doc/multiselect/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/multiselect.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/multiselect/pt/PTViewer.vue b/apps/showcase/doc/multiselect/pt/PTViewer.vue
new file mode 100644
index 000000000..c414928c1
--- /dev/null
+++ b/apps/showcase/doc/multiselect/pt/PTViewer.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </MultiSelect>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('MultiSelect'),
+                    key: 'MultiSelect'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/multiselect/pt/index.vue b/apps/showcase/doc/multiselect/pt/index.vue
index a5abc402a..5745701f0 100644
--- a/apps/showcase/doc/multiselect/pt/index.vue
+++ b/apps/showcase/doc/multiselect/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.multiselect',
diff --git a/apps/showcase/doc/organizationchart/pt/PTImage.vue b/apps/showcase/doc/organizationchart/pt/PTImage.vue
deleted file mode 100644
index 8f5f61875..000000000
--- a/apps/showcase/doc/organizationchart/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/orgchart.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/organizationchart/pt/PTViewer.vue b/apps/showcase/doc/organizationchart/pt/PTViewer.vue
new file mode 100644
index 000000000..05b6ad445
--- /dev/null
+++ b/apps/showcase/doc/organizationchart/pt/PTViewer.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <OrganizationChart :value="data" collapsible>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            },
+            docs: [
+                {
+                    data: getPTOptions('OrganizationChart'),
+                    key: 'OrganizationChart'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/organizationchart/pt/index.vue b/apps/showcase/doc/organizationchart/pt/index.vue
index 9394603e4..ec428dd0d 100644
--- a/apps/showcase/doc/organizationchart/pt/index.vue
+++ b/apps/showcase/doc/organizationchart/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.organizationchart',
diff --git a/apps/showcase/doc/password/pt/PTImage.vue b/apps/showcase/doc/password/pt/PTImage.vue
deleted file mode 100644
index c8a250309..000000000
--- a/apps/showcase/doc/password/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/password.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/password/pt/PTViewer.vue b/apps/showcase/doc/password/pt/PTViewer.vue
new file mode 100644
index 000000000..65817daba
--- /dev/null
+++ b/apps/showcase/doc/password/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Password v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Password'),
+                    key: 'Password'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/password/pt/index.vue b/apps/showcase/doc/password/pt/index.vue
index 9e5867c39..6fad0ea8a 100644
--- a/apps/showcase/doc/password/pt/index.vue
+++ b/apps/showcase/doc/password/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.password',
diff --git a/apps/showcase/doc/radiobutton/pt/PTImage.vue b/apps/showcase/doc/radiobutton/pt/PTImage.vue
deleted file mode 100644
index 92176b271..000000000
--- a/apps/showcase/doc/radiobutton/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/radiobutton.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/radiobutton/pt/PTViewer.vue b/apps/showcase/doc/radiobutton/pt/PTViewer.vue
new file mode 100644
index 000000000..4b7777781
--- /dev/null
+++ b/apps/showcase/doc/radiobutton/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <RadioButton v-model="value" value="1" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('RadioButton'),
+                    key: 'RadioButton'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/radiobutton/pt/index.vue b/apps/showcase/doc/radiobutton/pt/index.vue
index 7df1fcc4f..89bf449bf 100644
--- a/apps/showcase/doc/radiobutton/pt/index.vue
+++ b/apps/showcase/doc/radiobutton/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.radiobutton',
diff --git a/apps/showcase/doc/rating/pt/PTImage.vue b/apps/showcase/doc/rating/pt/PTImage.vue
deleted file mode 100644
index 1d9218e09..000000000
--- a/apps/showcase/doc/rating/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/rating.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/rating/pt/PTViewer.vue b/apps/showcase/doc/rating/pt/PTViewer.vue
new file mode 100644
index 000000000..4d6b7365b
--- /dev/null
+++ b/apps/showcase/doc/rating/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Rating v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Rating'),
+                    key: 'Rating'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/rating/pt/index.vue b/apps/showcase/doc/rating/pt/index.vue
index 266a34655..ca0391c82 100644
--- a/apps/showcase/doc/rating/pt/index.vue
+++ b/apps/showcase/doc/rating/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.rating',
diff --git a/apps/showcase/doc/select/pt/PTImage.vue b/apps/showcase/doc/select/pt/PTImage.vue
deleted file mode 100644
index 3e1f548e2..000000000
--- a/apps/showcase/doc/select/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dropdown.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/select/pt/PTViewer.vue b/apps/showcase/doc/select/pt/PTViewer.vue
new file mode 100644
index 000000000..2e6c142e1
--- /dev/null
+++ b/apps/showcase/doc/select/pt/PTViewer.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Select>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Select'),
+                    key: 'Select'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/select/pt/index.vue b/apps/showcase/doc/select/pt/index.vue
index 902e252fd..830c47a8a 100644
--- a/apps/showcase/doc/select/pt/index.vue
+++ b/apps/showcase/doc/select/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.select',
diff --git a/apps/showcase/doc/selectbutton/pt/PTImage.vue b/apps/showcase/doc/selectbutton/pt/PTImage.vue
deleted file mode 100644
index 3cad9421f..000000000
--- a/apps/showcase/doc/selectbutton/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/selectbutton.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/selectbutton/pt/PTViewer.vue b/apps/showcase/doc/selectbutton/pt/PTViewer.vue
new file mode 100644
index 000000000..1a7427bb3
--- /dev/null
+++ b/apps/showcase/doc/selectbutton/pt/PTViewer.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <SelectButton v-model="value" :options="options" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
+            docs: [
+                {
+                    data: getPTOptions('SelectButton'),
+                    key: 'SelectButton'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/selectbutton/pt/index.vue b/apps/showcase/doc/selectbutton/pt/index.vue
index 6c93a8c49..2d1edd55b 100644
--- a/apps/showcase/doc/selectbutton/pt/index.vue
+++ b/apps/showcase/doc/selectbutton/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.steps',
diff --git a/apps/showcase/doc/slider/pt/PTImage.vue b/apps/showcase/doc/slider/pt/PTImage.vue
deleted file mode 100644
index 82e8c937d..000000000
--- a/apps/showcase/doc/slider/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/slider.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/slider/pt/PTViewer.vue b/apps/showcase/doc/slider/pt/PTViewer.vue
new file mode 100644
index 000000000..ad02f4e73
--- /dev/null
+++ b/apps/showcase/doc/slider/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Slider v-model="value" class="w-56" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Slider'),
+                    key: 'Slider'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/slider/pt/index.vue b/apps/showcase/doc/slider/pt/index.vue
index e24bb83c0..513cc0df4 100644
--- a/apps/showcase/doc/slider/pt/index.vue
+++ b/apps/showcase/doc/slider/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.slider',
diff --git a/apps/showcase/doc/steps/AccessibilityDoc.vue b/apps/showcase/doc/steps/AccessibilityDoc.vue
deleted file mode 100644
index 9e7015deb..000000000
--- a/apps/showcase/doc/steps/AccessibilityDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
-            item defines <i>aria-current</i> as "step".
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last step if readonly is not enabled.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/steps/BasicDoc.vue b/apps/showcase/doc/steps/BasicDoc.vue
deleted file mode 100644
index 5302e6537..000000000
--- a/apps/showcase/doc/steps/BasicDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/ControlledDoc.vue b/apps/showcase/doc/steps/ControlledDoc.vue
deleted file mode 100644
index 70edc051c..000000000
--- a/apps/showcase/doc/steps/ControlledDoc.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-8 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-<Steps v-model:activeStep="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/ImportDoc.vue b/apps/showcase/doc/steps/ImportDoc.vue
deleted file mode 100644
index 292965415..000000000
--- a/apps/showcase/doc/steps/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Steps from 'primevue/steps';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/LinearDoc.vue b/apps/showcase/doc/steps/LinearDoc.vue
deleted file mode 100644
index 3fda1ca35..000000000
--- a/apps/showcase/doc/steps/LinearDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" :readonly="false" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/TemplateDoc.vue b/apps/showcase/doc/steps/TemplateDoc.vue
deleted file mode 100644
index 2327626ae..000000000
--- a/apps/showcase/doc/steps/TemplateDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" class="custom-steps" :readonly="false">
-    <template #item="{ item, active }">
-        <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-            <i :class="[item.icon, '!text-xl']" />
-        </span>
-    </template>
-</Steps>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        icon: 'pi pi-user'
-    },
-    {
-        icon: 'pi pi-calendar'
-    },
-    {
-        icon: 'pi pi-check'
-    }
-]);
-
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-</style>
diff --git a/apps/showcase/doc/steps/pt/PTImage.vue b/apps/showcase/doc/steps/pt/PTImage.vue
deleted file mode 100644
index a0f7288c3..000000000
--- a/apps/showcase/doc/steps/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/steps.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/steps/pt/index.vue b/apps/showcase/doc/steps/pt/index.vue
deleted file mode 100644
index 94048bfc0..000000000
--- a/apps/showcase/doc/steps/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.steps',
-                    label: 'Steps PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('Steps')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/steps/theming/TailwindDoc.vue b/apps/showcase/doc/steps/theming/TailwindDoc.vue
deleted file mode 100644
index 4daa6c5f8..000000000
--- a/apps/showcase/doc/steps/theming/TailwindDoc.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/steps/theming/index.vue b/apps/showcase/doc/steps/theming/index.vue
deleted file mode 100644
index acc869691..000000000
--- a/apps/showcase/doc/steps/theming/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('Steps')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('Steps')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/AccessibilityDoc.vue b/apps/showcase/doc/tabmenu/AccessibilityDoc.vue
deleted file mode 100644
index b23b96b68..000000000
--- a/apps/showcase/doc/tabmenu/AccessibilityDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/tabmenu/BasicDoc.vue b/apps/showcase/doc/tabmenu/BasicDoc.vue
deleted file mode 100644
index 153dcaf7e..000000000
--- a/apps/showcase/doc/tabmenu/BasicDoc.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/CommandDoc.vue b/apps/showcase/doc/tabmenu/CommandDoc.vue
deleted file mode 100644
index 360c59d82..000000000
--- a/apps/showcase/doc/tabmenu/CommandDoc.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'Dashboard',
-        icon: 'pi pi-home',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-        }
-    },
-    {
-        label: 'Transactions',
-        icon: 'pi pi-chart-line',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-        }
-    },
-    {
-        label: 'Products',
-        icon: 'pi pi-list',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-        }
-    },
-    {
-        label: 'Messages',
-        icon: 'pi pi-inbox',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-        }
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/ControlledDoc.vue b/apps/showcase/doc/tabmenu/ControlledDoc.vue
deleted file mode 100644
index 9558e1fa2..000000000
--- a/apps/showcase/doc/tabmenu/ControlledDoc.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-
-<TabMenu v-model:activeIndex="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/ImportDoc.vue b/apps/showcase/doc/tabmenu/ImportDoc.vue
deleted file mode 100644
index db8558892..000000000
--- a/apps/showcase/doc/tabmenu/ImportDoc.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TabMenu from 'primevue/tabmenu';
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/RouterDoc.vue b/apps/showcase/doc/tabmenu/RouterDoc.vue
deleted file mode 100644
index da365eca3..000000000
--- a/apps/showcase/doc/tabmenu/RouterDoc.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ item.label }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-palette',
-        command: () => {
-            this.$router.push('/theming/unstyled');
-        }
-    },
-    { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/TemplateDoc.vue b/apps/showcase/doc/tabmenu/TemplateDoc.vue
deleted file mode 100644
index d7bd86671..000000000
--- a/apps/showcase/doc/tabmenu/TemplateDoc.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-            <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
-            <span class="font-bold">{{ item.name }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/pt/index.vue b/apps/showcase/doc/tabmenu/pt/index.vue
deleted file mode 100644
index b88d33df3..000000000
--- a/apps/showcase/doc/tabmenu/pt/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.tabmenu',
-                    label: 'TabMenu PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('TabMenu')
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue b/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue
deleted file mode 100644
index 4daa6c5f8..000000000
--- a/apps/showcase/doc/tabmenu/theming/TailwindDoc.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>
diff --git a/apps/showcase/doc/tabmenu/theming/index.vue b/apps/showcase/doc/tabmenu/theming/index.vue
deleted file mode 100644
index 745a3ead3..000000000
--- a/apps/showcase/doc/tabmenu/theming/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('TabMenu')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('TabMenu')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/textarea/pt/PTImage.vue b/apps/showcase/doc/textarea/pt/PTImage.vue
deleted file mode 100644
index a54b9af4e..000000000
--- a/apps/showcase/doc/textarea/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/textarea.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/textarea/pt/PTViewer.vue b/apps/showcase/doc/textarea/pt/PTViewer.vue
new file mode 100644
index 000000000..278c7a0f5
--- /dev/null
+++ b/apps/showcase/doc/textarea/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Textarea'),
+                    key: 'Textarea'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/textarea/pt/index.vue b/apps/showcase/doc/textarea/pt/index.vue
index 7494da245..d813487e3 100644
--- a/apps/showcase/doc/textarea/pt/index.vue
+++ b/apps/showcase/doc/textarea/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.textarea',
diff --git a/apps/showcase/doc/timeline/pt/PTImage.vue b/apps/showcase/doc/timeline/pt/PTImage.vue
deleted file mode 100644
index 33af82797..000000000
--- a/apps/showcase/doc/timeline/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/timeline.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/timeline/pt/PTViewer.vue b/apps/showcase/doc/timeline/pt/PTViewer.vue
new file mode 100644
index 000000000..a2ec2c920
--- /dev/null
+++ b/apps/showcase/doc/timeline/pt/PTViewer.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
+            </template>
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Timeline'),
+                    key: 'Timeline'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/toast/pt/index.vue b/apps/showcase/doc/toast/pt/index.vue
index e236ed26a..d8d30b040 100644
--- a/apps/showcase/doc/toast/pt/index.vue
+++ b/apps/showcase/doc/toast/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.toast',
diff --git a/apps/showcase/doc/togglebutton/pt/PTImage.vue b/apps/showcase/doc/togglebutton/pt/PTImage.vue
deleted file mode 100644
index b13ed42a7..000000000
--- a/apps/showcase/doc/togglebutton/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/togglebutton.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/togglebutton/pt/PTViewer.vue b/apps/showcase/doc/togglebutton/pt/PTViewer.vue
new file mode 100644
index 000000000..7f424bafc
--- /dev/null
+++ b/apps/showcase/doc/togglebutton/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="w-full sm:w-40" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            docs: [
+                {
+                    data: getPTOptions('ToggleButton'),
+                    key: 'ToggleButton'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/togglebutton/pt/index.vue b/apps/showcase/doc/togglebutton/pt/index.vue
index 0f749eb58..43b51e467 100644
--- a/apps/showcase/doc/togglebutton/pt/index.vue
+++ b/apps/showcase/doc/togglebutton/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.togglebutton',
diff --git a/apps/showcase/doc/toggleswitch/pt/PTImage.vue b/apps/showcase/doc/toggleswitch/pt/PTImage.vue
deleted file mode 100644
index 60ede1567..000000000
--- a/apps/showcase/doc/toggleswitch/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/toggleswitch/pt/PTViewer.vue b/apps/showcase/doc/toggleswitch/pt/PTViewer.vue
new file mode 100644
index 000000000..4e7a290a7
--- /dev/null
+++ b/apps/showcase/doc/toggleswitch/pt/PTViewer.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <ToggleSwitch v-model="checked" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            docs: [
+                {
+                    data: getPTOptions('ToggleSwitch'),
+                    key: 'ToggleSwitch'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/toggleswitch/pt/index.vue b/apps/showcase/doc/toggleswitch/pt/index.vue
index 8e7aa7585..7709a9d22 100644
--- a/apps/showcase/doc/toggleswitch/pt/index.vue
+++ b/apps/showcase/doc/toggleswitch/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.toggleswitch',
diff --git a/apps/showcase/doc/treeselect/pt/PTImage.vue b/apps/showcase/doc/treeselect/pt/PTImage.vue
deleted file mode 100644
index d9adf74eb..000000000
--- a/apps/showcase/doc/treeselect/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/treeselect.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/treeselect/pt/PTViewer.vue b/apps/showcase/doc/treeselect/pt/PTViewer.vue
new file mode 100644
index 000000000..416ec7bd5
--- /dev/null
+++ b/apps/showcase/doc/treeselect/pt/PTViewer.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            docs: [
+                {
+                    data: getPTOptions('TreeSelect'),
+                    key: 'TreeSelect'
+                }
+            ]
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/treeselect/pt/index.vue b/apps/showcase/doc/treeselect/pt/index.vue
index c425a88b3..57a058f73 100644
--- a/apps/showcase/doc/treeselect/pt/index.vue
+++ b/apps/showcase/doc/treeselect/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.treeselect',
diff --git a/apps/showcase/doc/virtualscroller/pt/PTImage.vue b/apps/showcase/doc/virtualscroller/pt/PTImage.vue
deleted file mode 100644
index 26464488d..000000000
--- a/apps/showcase/doc/virtualscroller/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/virtualscroller.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/virtualscroller/pt/PTViewer.vue b/apps/showcase/doc/virtualscroller/pt/PTViewer.vue
new file mode 100644
index 000000000..255b7cf55
--- /dev/null
+++ b/apps/showcase/doc/virtualscroller/pt/PTViewer.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: null,
+            docs: [
+                {
+                    data: getPTOptions('VirtualScroller'),
+                    key: 'VirtualScroller'
+                }
+            ]
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/apps/showcase/doc/virtualscroller/pt/index.vue b/apps/showcase/doc/virtualscroller/pt/index.vue
index d7eac507e..ed5f7d174 100644
--- a/apps/showcase/doc/virtualscroller/pt/index.vue
+++ b/apps/showcase/doc/virtualscroller/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.virtualscroller',
diff --git a/apps/showcase/pages/steps/index.vue b/apps/showcase/pages/steps/index.vue
deleted file mode 100644
index 1872f7fb5..000000000
--- a/apps/showcase/pages/steps/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue Stepper Component"
-        header="Steps"
-        description="Steps also known as Stepper, is an indicator for the steps in a workflow."
-        :componentDocs="docs"
-        :apiDocs="['Steps', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/steps/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/steps/BasicDoc.vue';
-import ControlledDoc from '@/doc/steps/ControlledDoc.vue';
-import ImportDoc from '@/doc/steps/ImportDoc.vue';
-import LinearDoc from '@/doc/steps/LinearDoc.vue';
-import TemplateDoc from '@/doc/steps/TemplateDoc.vue';
-import PTComponent from '@/doc/steps/pt/index.vue';
-import ThemingDoc from '@/doc/steps/theming/index.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'linear',
-                    label: 'Linear',
-                    component: LinearDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/pages/tabmenu/index.vue b/apps/showcase/pages/tabmenu/index.vue
deleted file mode 100755
index 3676b0fe6..000000000
--- a/apps/showcase/pages/tabmenu/index.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <DocComponent
-        title="Vue TabMenu Component"
-        header="TabMenu"
-        description="TabMenu is a navigation component displaying menu items as tabs."
-        :componentDocs="docs"
-        :apiDocs="['TabMenu', 'MenuItem']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
-</template>
-
-<script>
-import AccessibilityDoc from '@/doc/tabmenu/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/tabmenu/BasicDoc.vue';
-import ControlledDoc from '@/doc/tabmenu/ControlledDoc.vue';
-import ImportDoc from '@/doc/tabmenu/ImportDoc.vue';
-import RouterDoc from '@/doc/tabmenu/RouterDoc.vue';
-import CommandDoc from '@/doc/tabmenu/CommandDoc.vue';
-import TemplateDoc from '@/doc/tabmenu/TemplateDoc.vue';
-import PTComponent from '@/doc/tabmenu/pt/index.vue';
-import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'controlled',
-                    label: 'Controlled',
-                    component: ControlledDoc
-                },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
-                {
-                    id: 'command',
-                    label: 'Command',
-                    component: CommandDoc
-                },
-                {
-                    id: 'router',
-                    label: 'Router',
-                    component: RouterDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ],
-            ptComponent: PTComponent,
-            themingDoc: ThemingDoc
-        };
-    }
-};
-</script>