diff --git a/apps/showcase/doc/avatar/pt/PTImage.vue b/apps/showcase/doc/avatar/pt/PTImage.vue
deleted file mode 100644
index 681a8dde7..000000000
--- a/apps/showcase/doc/avatar/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/avatar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/avatar/pt/PTViewer.vue b/apps/showcase/doc/avatar/pt/PTViewer.vue
new file mode 100644
index 000000000..213ff18ce
--- /dev/null
+++ b/apps/showcase/doc/avatar/pt/PTViewer.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="flex flex-wrap gap-8">
+            <AvatarGroup>
+                <Avatar label="P" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" size="xlarge" shape="circle" />
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center" size="xlarge" shape="circle" />
+            </AvatarGroup>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Avatar'),
+                    key: 'Avatar'
+                },
+                {
+                    data: getPTOptions('AvatarGroup'),
+                    key: 'AvatarGroup'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/avatar/pt/index.vue b/apps/showcase/doc/avatar/pt/index.vue
index ecfd2f206..a1bf3ae6f 100644
--- a/apps/showcase/doc/avatar/pt/index.vue
+++ b/apps/showcase/doc/avatar/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.avatar',
diff --git a/apps/showcase/doc/badge/pt/PTImage.vue b/apps/showcase/doc/badge/pt/PTImage.vue
deleted file mode 100644
index b42b31f33..000000000
--- a/apps/showcase/doc/badge/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/badge.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/badge/pt/PTViewer.vue b/apps/showcase/doc/badge/pt/PTViewer.vue
new file mode 100644
index 000000000..529fe50a2
--- /dev/null
+++ b/apps/showcase/doc/badge/pt/PTViewer.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="flex flex-wrap gap-8">
+            <Badge value="2"></Badge>
+            <OverlayBadge value="3">
+                <i class="pi pi-bell" style="font-size: 2rem" />
+            </OverlayBadge>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Badge'),
+                    key: 'Badge'
+                },
+                {
+                    data: getPTOptions('OverlayBadge'),
+                    key: 'OverlayBadge'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/badge/pt/index.vue b/apps/showcase/doc/badge/pt/index.vue
index c1bee986a..18a496a4b 100644
--- a/apps/showcase/doc/badge/pt/index.vue
+++ b/apps/showcase/doc/badge/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.badge',
diff --git a/apps/showcase/doc/blockui/pt/PTImage.vue b/apps/showcase/doc/blockui/pt/PTImage.vue
deleted file mode 100644
index 28bdd1def..000000000
--- a/apps/showcase/doc/blockui/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/blockui.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/blockui/pt/PTViewer.vue b/apps/showcase/doc/blockui/pt/PTViewer.vue
new file mode 100644
index 000000000..21c0e702c
--- /dev/null
+++ b/apps/showcase/doc/blockui/pt/PTViewer.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <BlockUI blocked>
+            <Panel header="Basic">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </BlockUI>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('BlockUI'),
+                    key: 'BlockUI'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/blockui/pt/index.vue b/apps/showcase/doc/blockui/pt/index.vue
index b74100990..c37059480 100644
--- a/apps/showcase/doc/blockui/pt/index.vue
+++ b/apps/showcase/doc/blockui/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.blockui',
diff --git a/apps/showcase/doc/chip/pt/PTImage.vue b/apps/showcase/doc/chip/pt/PTImage.vue
deleted file mode 100644
index 020c84559..000000000
--- a/apps/showcase/doc/chip/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/chip.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/chip/pt/PTViewer.vue b/apps/showcase/doc/chip/pt/PTViewer.vue
new file mode 100644
index 000000000..8a5bebb21
--- /dev/null
+++ b/apps/showcase/doc/chip/pt/PTViewer.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="flex flex-wrap gap-8">
+            <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+            <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Chip'),
+                    key: 'Chip'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/chip/pt/index.vue b/apps/showcase/doc/chip/pt/index.vue
index 232211fe1..4b2c939eb 100644
--- a/apps/showcase/doc/chip/pt/index.vue
+++ b/apps/showcase/doc/chip/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.chip',
diff --git a/apps/showcase/doc/fluid/pt/PTImage.vue b/apps/showcase/doc/fluid/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/fluid/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/fluid/pt/PTViewer.vue b/apps/showcase/doc/fluid/pt/PTViewer.vue
new file mode 100644
index 000000000..a7b23424e
--- /dev/null
+++ b/apps/showcase/doc/fluid/pt/PTViewer.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Fluid>
+            <InputText />
+        </Fluid>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Fluid'),
+                    key: 'Fluid'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/fluid/pt/index.vue b/apps/showcase/doc/fluid/pt/index.vue
index 514a9b880..732436e0c 100644
--- a/apps/showcase/doc/fluid/pt/index.vue
+++ b/apps/showcase/doc/fluid/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/inplace/pt/PTImage.vue b/apps/showcase/doc/inplace/pt/PTImage.vue
deleted file mode 100644
index 6982d27bb..000000000
--- a/apps/showcase/doc/inplace/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/inplace.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/inplace/pt/PTViewer.vue b/apps/showcase/doc/inplace/pt/PTViewer.vue
new file mode 100644
index 000000000..63db86257
--- /dev/null
+++ b/apps/showcase/doc/inplace/pt/PTViewer.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Inplace>
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Inplace'),
+                    key: 'Inplace'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/inplace/pt/index.vue b/apps/showcase/doc/inplace/pt/index.vue
index dbbb9c071..19ea6ea6a 100644
--- a/apps/showcase/doc/inplace/pt/index.vue
+++ b/apps/showcase/doc/inplace/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.inplace',