diff --git a/apps/showcase/doc/megamenu/pt/PTImage.vue b/apps/showcase/doc/megamenu/pt/PTImage.vue
deleted file mode 100644
index a624d52c5..000000000
--- a/apps/showcase/doc/megamenu/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/megamenu.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/megamenu/pt/PTViewer.vue b/apps/showcase/doc/megamenu/pt/PTViewer.vue
new file mode 100644
index 000000000..9cb1f9346
--- /dev/null
+++ b/apps/showcase/doc/megamenu/pt/PTViewer.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <MegaMenu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Furniture',
+                    icon: 'pi pi-box',
+                    items: [
+                        [
+                            {
+                                label: 'Living Room',
+                                items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Kitchen',
+                                items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                            },
+                            {
+                                label: 'Bathroom',
+                                items: [{ label: 'Accessories' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Electronics',
+                    icon: 'pi pi-mobile',
+                    items: [
+                        [
+                            {
+                                label: 'Computer',
+                                items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Home Theater',
+                                items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Sports',
+                    icon: 'pi pi-clock',
+                    items: [
+                        [
+                            {
+                                label: 'Football',
+                                items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Running',
+                                items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('MegaMenu'),
+                    key: 'MegaMenu'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/megamenu/pt/index.vue b/apps/showcase/doc/megamenu/pt/index.vue
index 6ab86713d..633cd8793 100644
--- a/apps/showcase/doc/megamenu/pt/index.vue
+++ b/apps/showcase/doc/megamenu/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.megamenu',
diff --git a/apps/showcase/doc/menubar/pt/PTImage.vue b/apps/showcase/doc/menubar/pt/PTImage.vue
deleted file mode 100644
index a1c257ba3..000000000
--- a/apps/showcase/doc/menubar/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/menubar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/menubar/pt/PTViewer.vue b/apps/showcase/doc/menubar/pt/PTViewer.vue
new file mode 100644
index 000000000..ce7a6bf28
--- /dev/null
+++ b/apps/showcase/doc/menubar/pt/PTViewer.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Menubar :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-home'
+                },
+                {
+                    label: 'Features',
+                    icon: 'pi pi-star'
+                },
+                {
+                    label: 'Projects',
+                    icon: 'pi pi-search',
+                    items: [
+                        {
+                            label: 'Components',
+                            icon: 'pi pi-bolt'
+                        },
+                        {
+                            label: 'Blocks',
+                            icon: 'pi pi-server'
+                        },
+                        {
+                            label: 'UI Kit',
+                            icon: 'pi pi-pencil'
+                        },
+                        {
+                            label: 'Templates',
+                            icon: 'pi pi-palette',
+                            items: [
+                                {
+                                    label: 'Apollo',
+                                    icon: 'pi pi-palette'
+                                },
+                                {
+                                    label: 'Ultima',
+                                    icon: 'pi pi-palette'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Contact',
+                    icon: 'pi pi-envelope'
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Menubar'),
+                    key: 'Menubar'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/menubar/pt/index.vue b/apps/showcase/doc/menubar/pt/index.vue
index b1e64ecbf..b2b157503 100644
--- a/apps/showcase/doc/menubar/pt/index.vue
+++ b/apps/showcase/doc/menubar/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.menubar',
diff --git a/apps/showcase/doc/panelmenu/pt/PTImage.vue b/apps/showcase/doc/panelmenu/pt/PTImage.vue
deleted file mode 100644
index 6e0ffa0bc..000000000
--- a/apps/showcase/doc/panelmenu/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/panelmenu.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/panelmenu/pt/PTViewer.vue b/apps/showcase/doc/panelmenu/pt/PTViewer.vue
new file mode 100644
index 000000000..6018ea194
--- /dev/null
+++ b/apps/showcase/doc/panelmenu/pt/PTViewer.vue
@@ -0,0 +1,101 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <PanelMenu :model="items" class="w-full md:w-80" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Files',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Documents',
+                            icon: 'pi pi-file',
+                            items: [
+                                {
+                                    label: 'Invoices',
+                                    icon: 'pi pi-file-pdf',
+                                    items: [
+                                        {
+                                            label: 'Pending',
+                                            icon: 'pi pi-stop'
+                                        },
+                                        {
+                                            label: 'Paid',
+                                            icon: 'pi pi-check-circle'
+                                        }
+                                    ]
+                                },
+                                {
+                                    label: 'Clients',
+                                    icon: 'pi pi-users'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Images',
+                            icon: 'pi pi-image',
+                            items: [
+                                {
+                                    label: 'Logos',
+                                    icon: 'pi pi-image'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Cloud',
+                    icon: 'pi pi-cloud',
+                    items: [
+                        {
+                            label: 'Upload',
+                            icon: 'pi pi-cloud-upload'
+                        },
+                        {
+                            label: 'Download',
+                            icon: 'pi pi-cloud-download'
+                        },
+                        {
+                            label: 'Sync',
+                            icon: 'pi pi-refresh'
+                        }
+                    ]
+                },
+                {
+                    label: 'Devices',
+                    icon: 'pi pi-desktop',
+                    items: [
+                        {
+                            label: 'Phone',
+                            icon: 'pi pi-mobile'
+                        },
+                        {
+                            label: 'Desktop',
+                            icon: 'pi pi-desktop'
+                        },
+                        {
+                            label: 'Tablet',
+                            icon: 'pi pi-tablet'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('PanelMenu'),
+                    key: 'PanelMenu'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/panelmenu/pt/index.vue b/apps/showcase/doc/panelmenu/pt/index.vue
index 3824a10d4..cb9710cec 100644
--- a/apps/showcase/doc/panelmenu/pt/index.vue
+++ b/apps/showcase/doc/panelmenu/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.panelmenu',
diff --git a/apps/showcase/doc/tieredmenu/pt/PTImage.vue b/apps/showcase/doc/tieredmenu/pt/PTImage.vue
deleted file mode 100644
index 0ab157667..000000000
--- a/apps/showcase/doc/tieredmenu/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/tieredmenu.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/tieredmenu/pt/PTViewer.vue b/apps/showcase/doc/tieredmenu/pt/PTViewer.vue
new file mode 100644
index 000000000..c8a844279
--- /dev/null
+++ b/apps/showcase/doc/tieredmenu/pt/PTViewer.vue
@@ -0,0 +1,92 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <TieredMenu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('TieredMenu'),
+                    key: 'TieredMenu'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/tieredmenu/pt/index.vue b/apps/showcase/doc/tieredmenu/pt/index.vue
index eb2c92003..9d9d03326 100644
--- a/apps/showcase/doc/tieredmenu/pt/index.vue
+++ b/apps/showcase/doc/tieredmenu/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.tieredmenu',