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