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