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/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/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',