diff --git a/api-generator/build-apidoc.js b/api-generator/build-apidoc.js
index a33fa6a02..ca27a821a 100644
--- a/api-generator/build-apidoc.js
+++ b/api-generator/build-apidoc.js
@@ -32,7 +32,9 @@ app.bootstrap({
     searchInComments: true,
     disableSources: true,
     logLevel: 'Error',
-    exclude: ['node_modules', 'components/lib/**/*.js']
+    sort: ['source-order'],
+    exclude: ['node_modules', 'components/lib/**/*.js'],
+
 });
 
 const project = app.convert();
diff --git a/assets/ptimages/panel.png b/assets/ptimages/panel.png
new file mode 100644
index 000000000..3e3189724
Binary files /dev/null and b/assets/ptimages/panel.png differ
diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
new file mode 100644
index 000000000..84282c451
--- /dev/null
+++ b/doc/accordion/pt/PTDoc.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="card">
+        <Panel header="Header" :pt="{ header: { style: 'background:#3B82F6' }, title: { style: 'color:#fff' }, toggler: { style: 'color:#fff' } }" toggleable>
+            <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>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" :pt="{header:{style:'background:#3B82F6'}, title: {style:'color:#fff'}, toggler:{style:'color:#fff'}}" toggleable>
+    <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>`,
+                options: `
+<template>
+  <div class="card">
+      <Panel header="Header">
+          <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>
+  </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+  <div class="card">
+      <Panel header="Header">
+          <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>
+  </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/accordion/pt/PTImage.vue b/doc/accordion/pt/PTImage.vue
new file mode 100644
index 000000000..5a968a749
--- /dev/null
+++ b/doc/accordion/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div>
+        <img class="w-full" src="@/assets/ptimages/panel.png" />
+    </div>
+</template>
diff --git a/doc/accordion/pt/index.vue b/doc/accordion/pt/index.vue
new file mode 100644
index 000000000..370ed2349
--- /dev/null
+++ b/doc/accordion/pt/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <div className="doc-main">
+        <div className="doc-intro">
+            <h1>Panel Pass Through</h1>
+            <p>Description</p>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import { getPTOption } from '@/layouts/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+import DocApiTable from '@/layouts/doc/DocApiTable.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Image',
+                    description: 'Pass Through Image',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.accordion',
+                    label: 'Accordion PT Options',
+                    description: 'Pass Through Accordion',
+                    component: DocApiTable,
+                    data: getPTOption('Accordion')
+                },
+                {
+                    id: 'pt.doc.tab',
+                    label: 'AccordionTab PT Options',
+                    description: 'Pass Through AccordionTab',
+                    component: DocApiTable,
+                    data: getPTOption('AccordionTab')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    description: 'Pass Through Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
new file mode 100644
index 000000000..84282c451
--- /dev/null
+++ b/doc/panel/pt/PTDoc.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="card">
+        <Panel header="Header" :pt="{ header: { style: 'background:#3B82F6' }, title: { style: 'color:#fff' }, toggler: { style: 'color:#fff' } }" toggleable>
+            <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>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" :pt="{header:{style:'background:#3B82F6'}, title: {style:'color:#fff'}, toggler:{style:'color:#fff'}}" toggleable>
+    <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>`,
+                options: `
+<template>
+  <div class="card">
+      <Panel header="Header">
+          <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>
+  </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+  <div class="card">
+      <Panel header="Header">
+          <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>
+  </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panel/pt/PTImage.vue b/doc/panel/pt/PTImage.vue
new file mode 100644
index 000000000..5a968a749
--- /dev/null
+++ b/doc/panel/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div>
+        <img class="w-full" src="@/assets/ptimages/panel.png" />
+    </div>
+</template>
diff --git a/doc/panel/pt/index.vue b/doc/panel/pt/index.vue
new file mode 100644
index 000000000..a2157127e
--- /dev/null
+++ b/doc/panel/pt/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <div className="doc-main">
+        <div className="doc-intro">
+            <h1>Panel Pass Through</h1>
+            <p>Description</p>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import { getPTOption } from '@/layouts/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+import DocApiTable from '@/layouts/doc/DocApiTable.vue';
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Image',
+                    description: 'Pass Through Image',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc',
+                    label: 'Panel PT Options',
+                    description: 'Pass Through Doc',
+                    component: DocApiTable,
+                    data: getPTOption('Panel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    description: 'Pass Through Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/layouts/doc/DocComponent.vue b/layouts/doc/DocComponent.vue
index 5497a5592..989bbaae6 100644
--- a/layouts/doc/DocComponent.vue
+++ b/layouts/doc/DocComponent.vue
@@ -12,6 +12,9 @@
             <li :class="{ 'doc-tabmenu-active': tab === 1 }">
                 <button type="button" @click="tab = 1">API</button>
             </li>
+            <li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
+                <button type="button" @click="tab = 2">Pass Through</button>
+            </li>
         </ul>
 
         <div class="doc-tabpanels">
@@ -29,13 +32,17 @@
             <div v-show="tab === 1" class="doc-tabpanel">
                 <DocApiSection :doc="apiDocs" :header="header" />
             </div>
+
+            <div v-if="tab === 2" class="doc-tabpanel">
+                <component :is="{ ...ptTabComponent }" />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className'],
+    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
     data() {
         return {
             tab: 0
diff --git a/layouts/doc/DocSectionNav.vue b/layouts/doc/DocSectionNav.vue
index 49358e8fc..45938f049 100644
--- a/layouts/doc/DocSectionNav.vue
+++ b/layouts/doc/DocSectionNav.vue
@@ -2,20 +2,16 @@
     <ul ref="nav" class="doc-section-nav">
         <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
             <div class="navbar-item-content">
-                <NuxtLink :to="`${checkRouteName}/#${doc.id}`">
-                    <button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
-                </NuxtLink>
+                <button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
             </div>
 
             <template v-if="doc.children">
                 <ul>
                     <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
                         <div class="navbar-item-content">
-                            <NuxtLink :to="`${checkRouteName}/#${child.id}`">
-                                <button class="p-link" @click="onButtonClick(child)">
-                                    {{ child.label }}
-                                </button>
-                            </NuxtLink>
+                            <button class="p-link" @click="onButtonClick(child)">
+                                {{ child.label }}
+                            </button>
                         </div>
                     </li>
                 </ul>
@@ -84,6 +80,7 @@ export default {
             label && label.parentElement.scrollIntoView({ block: 'start', behavior });
         },
         onButtonClick(doc) {
+            this.$router.push(`${this.checkRouteName}/#${doc.id}`);
             setTimeout(() => {
                 this.activeId = doc.id;
                 this.scrollToLabelById(doc.id, 'smooth');
diff --git a/layouts/doc/DocSections.vue b/layouts/doc/DocSections.vue
index 35a411625..fc5745fc6 100644
--- a/layouts/doc/DocSections.vue
+++ b/layouts/doc/DocSections.vue
@@ -13,7 +13,7 @@
             </template>
 
             <template v-else-if="!doc.children && doc.component">
-                <component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" />
+                <component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :description="doc.description" />
             </template>
         </section>
     </template>
diff --git a/layouts/doc/helpers/PTHelper.js b/layouts/doc/helpers/PTHelper.js
new file mode 100644
index 000000000..d21820f1b
--- /dev/null
+++ b/layouts/doc/helpers/PTHelper.js
@@ -0,0 +1,16 @@
+import APIDocs from '@/doc/common/apidoc/index.json';
+
+export const getPTOption = name => {
+    const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`];
+    let data = [];
+
+    for (const [i, prop] of props.entries()) {
+        data.push({
+            value: i + 1,
+            label: prop.name,
+            description: prop.description
+        });
+    }
+
+    return data;
+};
diff --git a/pages/accordion/index.vue b/pages/accordion/index.vue
index 342a80959..fc5b85e7a 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" />
+    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,7 +11,7 @@ import ImportDoc from '@/doc/accordion/ImportDoc';
 import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
 import StyleDoc from '@/doc/accordion/StyleDoc';
 import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
-
+import PTComponent from '@/doc/accordion/pt/index.vue';
 export default {
     data() {
         return {
@@ -56,7 +56,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index 5b73b2bfa..c07446934 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" />
+    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
@@ -8,6 +8,7 @@ import ImportDoc from '@/doc/panel/ImportDoc.vue';
 import StyleDoc from '@/doc/panel/StyleDoc.vue';
 import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
+import PTComponent from '@/doc/panel/pt/index.vue';
 export default {
     data() {
         return {
@@ -42,7 +43,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };