diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
new file mode 100644
index 000000000..aaf150cd5
--- /dev/null
+++ b/doc/passthrough/BasicDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <div class="card">
+        <Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" 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" toggleable
+    :pt="{
+        header: { class: 'bg-primary' },
+        title: { class: 'text-white' },
+        toggler: { class: 'text-white hover:bg-primary-reverse' }
+    }">
+    <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" toggleable
+            :pt="{
+                header: { class: 'bg-primary' },
+                title: { class: 'text-white' },
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
+            }">
+            <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" toggleable
+            :pt="{
+                header: { class: 'bg-primary' },
+                title: { class: 'text-white' },
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
+            }">
+            <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/passthrough/GlobalPTDoc.vue b/doc/passthrough/GlobalPTDoc.vue
new file mode 100644
index 000000000..3aecde834
--- /dev/null
+++ b/doc/passthrough/GlobalPTDoc.vue
@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue components can be globally managed through a single location using the global <i>pt</i> object. Before using the pt state from <i>PrimeVueContext</i>, it is essential to encapsulate your application with <i>PrimeVueProvider</i>.
+            For more details, <PrimeVueNuxtLink to="/installation/#plugin">click</PrimeVueNuxtLink> here.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+// main.js
+const pt = {
+    panel: {
+        header: { class: 'bg-primary' }
+    },
+    autocomplete: {
+        input: { root: { class: 'w-16rem' } }
+    }
+}
+
+const app = createApp(App);
+app.use(PrimeVue, { pt });
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/passthrough/index.vue b/pages/passthrough/index.vue
new file mode 100644
index 000000000..abbc346f8
--- /dev/null
+++ b/pages/passthrough/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocComponent
+        title="PrimeVue PassThrough"
+        header="PassThrough"
+        description="The Pass Through feature enables direct implementation of all relevant attributes (e.g., style, class) within the respective HTML tag."
+        :componentDocs="docs"
+        :apiDocs="['Config']"
+    />
+</template>
+
+<script>
+import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
+import GlobalPTDoc from '@/doc/passthrough/GlobalPTDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'globalpt',
+                    label: 'Global PassThrough Options',
+                    component: GlobalPTDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/plugins/primeVue.js b/plugins/primeVue.js
index bf1f72d3b..4a6b5dba4 100644
--- a/plugins/primeVue.js
+++ b/plugins/primeVue.js
@@ -107,8 +107,166 @@ import DocSectionText from '@/components/doc/DocSectionText';
 import CodeHighlight from '@/components/layout/CodeHighlight';
 import DevelopmentSection from '@/components/layout/DevelopmentSection';
 
+const pt = {
+    avatargroup: {
+        root: {
+            class: 'flex'
+        }
+    },
+    avatar: {
+        root: ({ parent }) => ({
+            style: parent.instance !== undefined ? 'margin-left: -1rem' : null
+        })
+    },
+    button: {
+        root: ({ context }) => {
+            // context.disabled
+        }
+    },
+    checkbox: {
+        root: ({ context }) => {
+            // context.checked
+            // context.focused
+            // context.disabled
+        }
+    },
+    datatable: {
+        root: { class: 'ddddd1' },
+        columnGroup: {
+            root: { class: 'deneme88' }
+        },
+        headerRow: { class: 'xxx' },
+        row: {
+            root: ({ row }) => ({ class: row.context.index === 1 ? 'xxxx4' : 'xxxx5' })
+        },
+        column: {
+            root: { class: 'column333' }
+        }
+    },
+    accordion: {
+        root:
+            // console.log(instance),
+            {
+                class: 'root'
+            },
+        tab: {
+            root: {
+                class: 'tab-root'
+            },
+            header: {
+                class: 'tab-header'
+            },
+            headerAction: {
+                class: 'tab-header-action'
+            }
+        }
+        // header: {
+        //     class: 'header-class'
+        // },
+        // headerAction: ({ instance }) => {
+        //     console.log('jwkdhuv');
+        //     console.log(instance);
+        // }
+    },
+    // accordiontab: {
+    //     root: {
+    //         class: 'tab-root'
+    //     },
+    //     header: {
+    //         class: 'root-header'
+    //     }
+    // },
+    directives: {
+        ripple: {
+            css: {
+                root: {
+                    class: 'deneme',
+                    style: {
+                        // display: 'block',
+                        // position: 'absolute',
+                        background: 'rgba(75, 175, 80, 0.9)'
+                        // borderRadius: '100%',
+                        // transform: 'scale(0)',
+                        // pointerEvents: 'none'
+                    }
+                }
+            },
+            hooks: {
+                mounted: ($el, el, binding) => {
+                    // console.log('mounted', $el);
+                },
+                unmounted: (el) => {
+                    // console.log('unmounted', el);
+                }
+            }
+        },
+        badge: {
+            css: {
+                root: {
+                    class: 'bg-cyan-500'
+                }
+            },
+            hooks: {
+                mounted: ($el) => {
+                    // console.log($el);
+                },
+                updated: ($el) => {
+                    // console.log($el);
+                }
+            }
+        },
+        tooltip: {
+            hooks: {
+                beforeMount: (el, binding) => {},
+                unmounted: (el) => {
+                    // console.log('unmounted');
+                },
+                beforeUpdate() {
+                    // console.log('before update');
+                },
+                updated: (el, options) => {
+                    // console.log('global updated');
+                }
+            },
+            css: {
+                // root: {
+                //     class: 'deneme',
+                //     style: {
+                //         position: 'absolute'
+                //     }
+                // },
+                text: {
+                    class: 'text-2xl'
+                }
+            }
+        },
+        focustrap: {
+            css: {
+                root: {
+                    class: 'xxxxxx'
+                },
+                firstFocusableElement: {
+                    class: 'yyyyyy'
+                }
+            },
+            hooks: {
+                mounted: ($el) => {
+                    // console.log($el);
+                }
+            }
+        },
+        styleclass: {
+            hooks: {
+                mounted(a, b, c, d, e) {
+                    // console.log(e);
+                }
+            }
+        }
+    }
+};
+
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
+    nuxtApp.vueApp.use(PrimeVue, { ripple: true, pt });
 
     nuxtApp.vueApp.use(ToastService);
     nuxtApp.vueApp.use(ConfirmationService);