diff --git a/doc/accordion/theming/TailwindDoc.vue b/doc/accordion/theming/TailwindDoc.vue
index 6d63730ce..f5b84594b 100644
--- a/doc/accordion/theming/TailwindDoc.vue
+++ b/doc/accordion/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -24,12 +24,6 @@ export const TRANSITIONS = {
         leaveFromClass: 'max-h-40',
         leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
         leaveToClass: 'max-h-0'
-    },
-    overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
     }
 };
 
diff --git a/doc/accordion/theming/UnstyledDoc.vue b/doc/accordion/theming/UnstyledDoc.vue
deleted file mode 100644
index d2df41e77..000000000
--- a/doc/accordion/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Accordion :activeIndex="0">
-            <AccordionTab header="Header I">
-                <p>
-                    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>
-            </AccordionTab>
-            <AccordionTab header="Header II">
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header III">
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
-            </AccordionTab>
-        </Accordion>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/accordion/theming/index.vue b/doc/accordion/theming/index.vue
index b05169466..f97ebbf7a 100644
--- a/doc/accordion/theming/index.vue
+++ b/doc/accordion/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/autocomplete/theming/TailwindDoc.vue b/doc/autocomplete/theming/TailwindDoc.vue
index aa4271609..28bbfcfb4 100644
--- a/doc/autocomplete/theming/TailwindDoc.vue
+++ b/doc/autocomplete/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/avatar/theming/TailwindDoc.vue b/doc/avatar/theming/TailwindDoc.vue
index 652c85710..9b13a52f1 100644
--- a/doc/avatar/theming/TailwindDoc.vue
+++ b/doc/avatar/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/avatar/theming/UnstyledDoc.vue b/doc/avatar/theming/UnstyledDoc.vue
deleted file mode 100644
index c8bc39c13..000000000
--- a/doc/avatar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex flex-wrap gap-5">
-            <div>
-                <h5>Image</h5>
-                <div class="flex">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                </div>
-            </div>
-
-            <div>
-                <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
-            </div>
-
-            <div>
-                <h5>Gravatar</h5>
-                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
-            </div>
-        </div>
-    </div>
-    <div class="card flex justify-content-center">
-        <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
-        </AvatarGroup>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/avatar/theming/index.vue b/doc/avatar/theming/index.vue
index 14898914f..d5066eb30 100644
--- a/doc/avatar/theming/index.vue
+++ b/doc/avatar/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/badge/theming/TailwindDoc.vue b/doc/badge/theming/TailwindDoc.vue
index 541d344d2..de64320fd 100644
--- a/doc/badge/theming/TailwindDoc.vue
+++ b/doc/badge/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/badge/theming/UnstyledDoc.vue b/doc/badge/theming/UnstyledDoc.vue
deleted file mode 100644
index 8f0bdc5d1..000000000
--- a/doc/badge/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Badge value="2"></Badge>
-        <Badge value="8" severity="success"></Badge>
-        <Badge value="4" severity="info"></Badge>
-        <Badge value="12" severity="warning"></Badge>
-        <Badge value="3" severity="danger"></Badge>
-    </div>
-
-    <div class="card flex flex-wrap justify-center gap-4 mt-4">
-        <i v-badge="2" class="pi pi-bell relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
-        <i v-badge.danger="'5+'" class="pi pi-calendar relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
-        <i v-badge.danger class="pi pi-envelope relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
-    </div>
-</template>
-
-<script setup>
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/badge/theming/index.vue b/doc/badge/theming/index.vue
index 302a0f74d..5c9033283 100644
--- a/doc/badge/theming/index.vue
+++ b/doc/badge/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/blockui/theming/TailwindDoc.vue b/doc/blockui/theming/TailwindDoc.vue
index 0566f8912..e448de6ae 100644
--- a/doc/blockui/theming/TailwindDoc.vue
+++ b/doc/blockui/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/blockui/theming/UnstyledDoc.vue b/doc/blockui/theming/UnstyledDoc.vue
deleted file mode 100644
index 350c1e9a6..000000000
--- a/doc/blockui/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <div class="mb-3">
-            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
-            <Button label="Unblock" @click="blocked = false"></Button>
-        </div>
-        <BlockUI :blocked="blocked">
-            <Panel header="Basic">
-                <p class="text-gray-700 dark:text-white/80 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>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const blocked = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/blockui/theming/index.vue b/doc/blockui/theming/index.vue
index e4c7bc956..bea3987f1 100644
--- a/doc/blockui/theming/index.vue
+++ b/doc/blockui/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/button/theming/TailwindDoc.vue b/doc/button/theming/TailwindDoc.vue
index b5b5392f9..7b611e544 100644
--- a/doc/button/theming/TailwindDoc.vue
+++ b/doc/button/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/button/theming/UnstyledDoc.vue b/doc/button/theming/UnstyledDoc.vue
deleted file mode 100644
index 4c9aae96c..000000000
--- a/doc/button/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap gap-3">
-        <Button label="Primary" />
-        <Button label="Secondary" severity="secondary" />
-        <Button label="Success" severity="success" />
-        <Button label="Info" severity="info" />
-        <Button label="Warning" severity="warning" />
-        <Button label="Help" severity="help" />
-        <Button label="Danger" severity="danger" />
-    </div>
-</template>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/button/theming/index.vue b/doc/button/theming/index.vue
index ccb08d28c..cf19bcd1d 100644
--- a/doc/button/theming/index.vue
+++ b/doc/button/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/calendar/theming/TailwindDoc.vue
index 457ea8f47..42d967bed 100644
--- a/doc/calendar/theming/TailwindDoc.vue
+++ b/doc/calendar/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/card/theming/TailwindDoc.vue b/doc/card/theming/TailwindDoc.vue
index aba3f2085..0d1eb6125 100644
--- a/doc/card/theming/TailwindDoc.vue
+++ b/doc/card/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/card/theming/UnstyledDoc.vue b/doc/card/theming/UnstyledDoc.vue
deleted file mode 100644
index c3d1e30cf..000000000
--- a/doc/card/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex items-center justify-center">
-        <Card style="width: 25em">
-            <template #header>
-                <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
-            </template>
-            <template #title> Advanced Card </template>
-            <template #subtitle> Card subtitle </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-            <template #footer>
-                <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
-            </template>
-        </Card>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/card/theming/index.vue b/doc/card/theming/index.vue
index 711782bdc..4f2dffd8a 100644
--- a/doc/card/theming/index.vue
+++ b/doc/card/theming/index.vue
@@ -11,7 +11,7 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+
 export default {
     data() {
         return {
@@ -24,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/carousel/theming/TailwindDoc.vue b/doc/carousel/theming/TailwindDoc.vue
index 87c4e2530..bc821512b 100644
--- a/doc/carousel/theming/TailwindDoc.vue
+++ b/doc/carousel/theming/TailwindDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
-        <DocSectionCode :code="code2" embedded />
+        <DocSectionCode :code="code2" embedded :service="['ProductService']" />
     </DocSectionText>
 </template>
 
diff --git a/doc/carousel/theming/UnstyledDoc.vue b/doc/carousel/theming/UnstyledDoc.vue
deleted file mode 100644
index 67da7a460..000000000
--- a/doc/carousel/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['ProductService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
-            <template #item="slotProps">
-                <div class="border bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 rounded-lg m-2 text-center py-5 px-3">
-                    <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-1/2 shadow-sm" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1 text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3 text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Carousel>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { ProductService } from '@/service/ProductService';
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
-})
-
-const products = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '1199px',
-        numVisible: 3,
-        numScroll: 3
-    },
-    {
-        breakpoint: '991px',
-        numVisible: 2,
-        numScroll: 2
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/carousel/theming/index.vue b/doc/carousel/theming/index.vue
index 4b19042cb..5dae62c3b 100644
--- a/doc/carousel/theming/index.vue
+++ b/doc/carousel/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/cascadeselect/theming/TailwindDoc.vue b/doc/cascadeselect/theming/TailwindDoc.vue
index 5a4eecae0..bae27285c 100644
--- a/doc/cascadeselect/theming/TailwindDoc.vue
+++ b/doc/cascadeselect/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/chart/theming/TailwindDoc.vue b/doc/chart/theming/TailwindDoc.vue
index c6f2fa022..7e0c3dc55 100644
--- a/doc/chart/theming/TailwindDoc.vue
+++ b/doc/chart/theming/TailwindDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
-        <DocSectionCode :code="code2" embedded />
+        <DocSectionCode :code="code2" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
     </DocSectionText>
 </template>
 
diff --git a/doc/chart/theming/UnstyledDoc.vue b/doc/chart/theming/UnstyledDoc.vue
deleted file mode 100644
index 169bc3225..000000000
--- a/doc/chart/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Chart type="bar" :data="chartData" :options="chartOptions" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const chartData = ref({
-    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
-    datasets: [
-        {
-            label: 'Sales',
-            data: [540, 325, 702, 620],
-            backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
-            borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
-            borderWidth: 1
-        }
-    ]
-});
-const chartOptions = ref({
-    scales: {
-        y: {
-            beginAtZero: true
-        }
-    }
-});
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chart/theming/index.vue b/doc/chart/theming/index.vue
index 9d7e538fa..521968412 100644
--- a/doc/chart/theming/index.vue
+++ b/doc/chart/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/chip/theming/TailwindDoc.vue b/doc/chip/theming/TailwindDoc.vue
index 222b8241c..73831c5b5 100644
--- a/doc/chip/theming/TailwindDoc.vue
+++ b/doc/chip/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/chip/theming/UnstyledDoc.vue b/doc/chip/theming/UnstyledDoc.vue
deleted file mode 100644
index f65d0b0a0..000000000
--- a/doc/chip/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-2">
-        <Chip label="Apple" icon="pi pi-apple" />
-        <Chip label="Facebook" icon="pi pi-facebook" />
-        <Chip label="Google" icon="pi pi-google" />
-        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
-    </div>
-</template>
-<script setup>
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chip/theming/index.vue b/doc/chip/theming/index.vue
index bb4e5e763..5d5b08721 100644
--- a/doc/chip/theming/index.vue
+++ b/doc/chip/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/colorpicker/theming/TailwindDoc.vue b/doc/colorpicker/theming/TailwindDoc.vue
index a1f97642b..d8e567711 100644
--- a/doc/colorpicker/theming/TailwindDoc.vue
+++ b/doc/colorpicker/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/confirmdialog/theming/TailwindDoc.vue b/doc/confirmdialog/theming/TailwindDoc.vue
index 7faf059c4..292eb910b 100644
--- a/doc/confirmdialog/theming/TailwindDoc.vue
+++ b/doc/confirmdialog/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/confirmdialog/theming/UnstyledDoc.vue b/doc/confirmdialog/theming/UnstyledDoc.vue
deleted file mode 100644
index facdb0cad..000000000
--- a/doc/confirmdialog/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <Toast />
-    <ConfirmDialog></ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm1 = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-
-const confirm2 = () => {
-    confirm.require({
-        message: 'Do you want to delete this record?',
-        header: 'Delete Confirmation',
-        icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/confirmdialog/theming/index.vue b/doc/confirmdialog/theming/index.vue
index 724d5d56c..9299548ef 100644
--- a/doc/confirmdialog/theming/index.vue
+++ b/doc/confirmdialog/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/confirmpopup/theming/TailwindDoc.vue b/doc/confirmpopup/theming/TailwindDoc.vue
index 1f00670dc..772c6777c 100644
--- a/doc/confirmpopup/theming/TailwindDoc.vue
+++ b/doc/confirmpopup/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/confirmpopup/theming/UnstyledDoc.vue b/doc/confirmpopup/theming/UnstyledDoc.vue
deleted file mode 100644
index 6b7fc4ed3..000000000
--- a/doc/confirmpopup/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <Toast />
-    <ConfirmPopup></ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-center">
-        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
-    </div>
-</template>
-
-<script setup>
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
-
-const confirm = useConfirm();
-const toast = useToast();
-
-const confirm1 = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-
-const confirm2 = (event) => {
-    confirm.require({
-        target: event.currentTarget,
-        message: 'Do you want to delete this record?',
-        icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/confirmpopup/theming/index.vue b/doc/confirmpopup/theming/index.vue
index 9cd19d31f..9deef1462 100644
--- a/doc/confirmpopup/theming/index.vue
+++ b/doc/confirmpopup/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue
index 59e713378..2868fa7fd 100644
--- a/doc/datatable/theming/TailwindDoc.vue
+++ b/doc/datatable/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/dialog/theming/TailwindDoc.vue b/doc/dialog/theming/TailwindDoc.vue
index d75d87b9a..140e4dd73 100644
--- a/doc/dialog/theming/TailwindDoc.vue
+++ b/doc/dialog/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/dialog/theming/UnstyledDoc.vue b/doc/dialog/theming/UnstyledDoc.vue
deleted file mode 100644
index 823ea2fba..000000000
--- a/doc/dialog/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
-            <p>
-                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>
-        </Dialog>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visible = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dialog/theming/index.vue b/doc/dialog/theming/index.vue
index 3f3194262..4c3867834 100644
--- a/doc/dialog/theming/index.vue
+++ b/doc/dialog/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/divider/theming/TailwindDoc.vue b/doc/divider/theming/TailwindDoc.vue
index c84ecedf8..9a7a1472c 100644
--- a/doc/divider/theming/TailwindDoc.vue
+++ b/doc/divider/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/divider/theming/UnstyledDoc.vue b/doc/divider/theming/UnstyledDoc.vue
deleted file mode 100644
index c4c9aa780..000000000
--- a/doc/divider/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card text-gray-700 dark:text-white/80">
-        <p>
-            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>
-
-        <Divider align="left" type="solid">
-            <b>Left</b>
-        </Divider>
-
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-
-        <Divider align="center" type="dotted">
-            <b>Center</b>
-        </Divider>
-
-        <p>
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
-            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
-
-        <Divider align="right" type="dashed">
-            <b>Right</b>
-        </Divider>
-
-        <p>
-            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-        </p>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/divider/theming/index.vue b/doc/divider/theming/index.vue
index ef05b6a12..e69ac75d2 100644
--- a/doc/divider/theming/index.vue
+++ b/doc/divider/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue
index a6e325c8b..4d2e40acc 100644
--- a/doc/dropdown/theming/TailwindDoc.vue
+++ b/doc/dropdown/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/dynamicdialog/theming/TailwindDoc.vue b/doc/dynamicdialog/theming/TailwindDoc.vue
index 184d54199..6280af533 100644
--- a/doc/dynamicdialog/theming/TailwindDoc.vue
+++ b/doc/dynamicdialog/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -149,22 +149,7 @@ const showProducts = () => {
         }
     });
 }
-<\/script>`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
+<\/script>`
             },
             extFiles: {
                 options: {
diff --git a/doc/dynamicdialog/theming/UnstyledDoc.vue b/doc/dynamicdialog/theming/UnstyledDoc.vue
deleted file mode 100644
index fff315efe..000000000
--- a/doc/dynamicdialog/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,353 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-
-<DynamicDialog />`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script>
-import Button from 'primevue/button';
-import { markRaw, defineAsyncComponent } from 'vue';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
-
-export default {
-    methods: {
-        showProducts() {
-            const dialogRef = this.$dialog.open(ProductListDemo, {
-                props: {
-                    header: 'Product List',
-                    style: {
-                        width: '50vw'
-                    },
-                    breakpoints: {
-                        '960px': '75vw',
-                        '640px': '90vw'
-                    },
-                    modal: true
-                },
-                templates: {
-                    footer: markRaw(FooterDemo)
-                },
-                onClose: (options) => {
-                    const data = options.data;
-
-                    if (data) {
-                        const buttonType = data.buttonType;
-                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
-
-                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
-                    }
-                }
-            });
-        }
-    }
-}
-<\/script>`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script setup>
-import { markRaw, defineAsyncComponent } from 'vue';
-import { useDialog } from 'primevue/usedialog';
-import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
-
-const dialog = useDialog();
-const toast = useToast();
-
-const showProducts = () => {
-    const dialogRef = dialog.open(ProductListDemo, {
-        props: {
-            header: 'Product List',
-            style: {
-                width: '50vw',
-            },
-            breakpoints:{
-                '960px': '75vw',
-                '640px': '90vw'
-            },
-            modal: true
-        },
-        templates: {
-            footer: markRaw(FooterDemo)
-        },
-        onClose: (options) => {
-            const data = options.data;
-            if (data) {
-                const buttonType = data.buttonType;
-                const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
-
-                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
-            }
-        }
-    });
-}
-<\/script>`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            },
-            extFiles: {
-                options: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import InfoDemo from './InfoDemo.vue';
-
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
-    },
-    methods: {
-        selectProduct(data) {
-            this.dialogRef.close(data);
-        },
-        showInfo() {
-            this.$dialog.open(InfoDemo, {
-                props: {
-                    header: 'Information',
-                    modal: true,
-                    dismissableMask: true
-                },
-                data: {
-                    totalProducts: this.products ? this.products.length : 0
-                }
-            });
-        }
-    }
-}
-<\/script>`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-content-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            totalProducts: 0
-        }
-    },
-    mounted() {
-        this.totalProducts = this.dialogRef.data.totalProducts;
-    },
-    methods: {
-        closeDialog() {
-            this.dialogRef.close();
-        }
-    }
-}
-<\/script>
-                            `
-                    },
-                    'src/components/FooterDemo.vue': {
-                        content: `
-<template>
-    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
-    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    methods: {
-        closeDialog(e) {
-            this.dialogRef.close(e);
-        }
-    }
-};
-<\/script>`
-                    }
-                },
-                composition: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-import { useDialog } from "primevue/usedialog";
-import { ProductService } from "@/service/ProductService";
-import InfoDemo from "./InfoDemo.vue";
-
-const dialogRef = inject("dialogRef");
-const dialog = useDialog();
-const products = ref(null);
-
-onMounted(() => {
-    ProductService
-        .getProductsSmall()
-        .then((data) => (products.value = data.slice(0, 5)));
-});
-
-const selectProduct = (data) => {
-    dialogRef.value.close(data);
-};
-
-const showInfo = () => {
-    dialog.open(InfoDemo, {
-        props: {
-            header: "Information",
-            modal: true,
-            dismissableMask: true,
-        },
-        data: {
-            totalProducts: products.value ? products.value.length : 0,
-        }
-    });
-};
-<\/script>`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <div class="flex justify-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-const totalProducts = ref(0);
-const dialogRef = inject("dialogRef");
-
-onMounted(() => {
-    totalProducts.value = dialogRef.value.data.totalProducts;
-});
-
-const closeDialog = () => {
-    dialogRef.value.close();
-};
-<\/script>
-                            `
-                    },
-                    'src/components/FooterDemo.vue': {
-                        content: `
-<template>
-    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
-    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
-</template>
-
-<script setup>
-import { inject } from "vue";
-
-const dialogRef = inject("dialogRef");
-
-const closeDialog = (e) => {
-    dialogRef.value.close(e);
-};
-<\/script>`
-                    }
-                }
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dynamicdialog/theming/index.vue b/doc/dynamicdialog/theming/index.vue
index a7a1c6d3d..fa75ba114 100644
--- a/doc/dynamicdialog/theming/index.vue
+++ b/doc/dynamicdialog/theming/index.vue
@@ -10,7 +10,6 @@
 
 <script>
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -19,7 +18,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/fieldset/theming/TailwindDoc.vue b/doc/fieldset/theming/TailwindDoc.vue
index 38327ac7d..8d28e9dc6 100644
--- a/doc/fieldset/theming/TailwindDoc.vue
+++ b/doc/fieldset/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -24,12 +24,6 @@ export const TRANSITIONS = {
         leaveFromClass: 'max-h-40',
         leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
         leaveToClass: 'max-h-0'
-    },
-    overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
     }
 };
 
diff --git a/doc/fieldset/theming/UnstyledDoc.vue b/doc/fieldset/theming/UnstyledDoc.vue
deleted file mode 100644
index 70f282a4f..000000000
--- a/doc/fieldset/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Fieldset legend="Header" :toggleable="true">
-            <p>
-                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>
-        </Fieldset>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/fieldset/theming/index.vue b/doc/fieldset/theming/index.vue
index 95712258d..75453a614 100644
--- a/doc/fieldset/theming/index.vue
+++ b/doc/fieldset/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/fileupload/theming/TailwindDoc.vue b/doc/fileupload/theming/TailwindDoc.vue
index 3546e64d5..ce135b919 100644
--- a/doc/fileupload/theming/TailwindDoc.vue
+++ b/doc/fileupload/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/fileupload/theming/UnstyledDoc.vue b/doc/fileupload/theming/UnstyledDoc.vue
deleted file mode 100644
index 9ff5c8e65..000000000
--- a/doc/fileupload/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Toast />
-        <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
-            <template #empty>
-                <p>Drag and drop files to here to upload.</p>
-            </template>
-        </FileUpload>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const onAdvancedUpload = () => {
-    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/fileupload/theming/index.vue b/doc/fileupload/theming/index.vue
index ee9bdee6d..59e594220 100644
--- a/doc/fileupload/theming/index.vue
+++ b/doc/fileupload/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/galleria/theming/TailwindDoc.vue b/doc/galleria/theming/TailwindDoc.vue
index a27496423..3d2ad7a5c 100644
--- a/doc/galleria/theming/TailwindDoc.vue
+++ b/doc/galleria/theming/TailwindDoc.vue
@@ -2,11 +2,11 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
-        <DocSectionCode :code="code2" embedded />
+        <DocSectionCode :code="code2" embedded :service="['PhotoService']" />
     </DocSectionText>
 </template>
 
diff --git a/doc/galleria/theming/UnstyledDoc.vue b/doc/galleria/theming/UnstyledDoc.vue
deleted file mode 100644
index 6476b6934..000000000
--- a/doc/galleria/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['PhotoService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card md:flex md:justify-center">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
-            <template #item="slotProps">
-                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
-            </template>
-            <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
-            </template>
-        </Galleria>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-import { PhotoService } from '@/service/PhotoService';
-
-onMounted(() => {
-    PhotoService.getImages().then((data) => (images.value = data));
-});
-
-const images = ref();
-const responsiveOptions = ref([
-    {
-        breakpoint: '991px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '767px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1
-    }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/galleria/theming/index.vue b/doc/galleria/theming/index.vue
index 7d0d22418..62ac1dd20 100644
--- a/doc/galleria/theming/index.vue
+++ b/doc/galleria/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/image/theming/TailwindDoc.vue b/doc/image/theming/TailwindDoc.vue
index 958c09c8a..56be44b4d 100644
--- a/doc/image/theming/TailwindDoc.vue
+++ b/doc/image/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/image/theming/UnstyledDoc.vue b/doc/image/theming/UnstyledDoc.vue
deleted file mode 100644
index 523682315..000000000
--- a/doc/image/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
-    </div>
-</template>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/image/theming/index.vue b/doc/image/theming/index.vue
index c16aebcbb..850cb261c 100644
--- a/doc/image/theming/index.vue
+++ b/doc/image/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/inlinemessage/theming/TailwindDoc.vue b/doc/inlinemessage/theming/TailwindDoc.vue
new file mode 100644
index 000000000..2d7aa4427
--- /dev/null
+++ b/doc/inlinemessage/theming/TailwindDoc.vue
@@ -0,0 +1,55 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    inlinemessage: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex items-center justify-center align-top',
+                'p-3 m-0 rounded-md',
+                {
+                    'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
+                    'bg-green-100 border-0 text-green-700': props.severity == 'success',
+                    'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
+                    'bg-red-100 border-0 text-red-700': props.severity == 'error'
+                }
+            ]
+        }),
+        icon: 'text-base mr-2'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap items-center justify-center gap-3">
+        <InlineMessage severity="success">Success Content</InlineMessage>
+        <InlineMessage severity="info">Info Content</InlineMessage>
+        <InlineMessage severity="warn">Warning Content</InlineMessage>
+        <InlineMessage severity="error">Error Content</InlineMessage>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inlinemessage/theming/UnstyledDoc.vue b/doc/inlinemessage/theming/UnstyledDoc.vue
deleted file mode 100644
index d95407ede..000000000
--- a/doc/inlinemessage/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap items-center justify-center gap-3">
-        <InlineMessage severity="success">Success Content</InlineMessage>
-        <InlineMessage severity="info">Info Content</InlineMessage>
-        <InlineMessage severity="warn">Warning Content</InlineMessage>
-        <InlineMessage severity="error">Error Content</InlineMessage>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inlinemessage/theming/index.vue b/doc/inlinemessage/theming/index.vue
index 326acc008..3d87bd7ee 100644
--- a/doc/inlinemessage/theming/index.vue
+++ b/doc/inlinemessage/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/inplace/theming/TailwindDoc.vue b/doc/inplace/theming/TailwindDoc.vue
index 56942af19..cdb29697a 100644
--- a/doc/inplace/theming/TailwindDoc.vue
+++ b/doc/inplace/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/inplace/theming/UnstyledDoc.vue b/doc/inplace/theming/UnstyledDoc.vue
deleted file mode 100644
index 1360956c2..000000000
--- a/doc/inplace/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Inplace>
-            <template #display>
-                <span class="text-gray-700 dark:text-white/80"> View Content </span>    
-            </template>
-            <template #content>
-                <p class="text-gray-700 dark:text-white/80 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>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inplace/theming/index.vue b/doc/inplace/theming/index.vue
index f831f6ed9..314cc04b3 100644
--- a/doc/inplace/theming/index.vue
+++ b/doc/inplace/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/menu/theming/TailwindDoc.vue b/doc/menu/theming/TailwindDoc.vue
index a03e3a116..fcfa00357 100644
--- a/doc/menu/theming/TailwindDoc.vue
+++ b/doc/menu/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue
index 40f0000f7..a4a6bf842 100644
--- a/doc/multiselect/theming/TailwindDoc.vue
+++ b/doc/multiselect/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/orderlist/theming/TailwindDoc.vue b/doc/orderlist/theming/TailwindDoc.vue
index c40eaa455..60558ee03 100644
--- a/doc/orderlist/theming/TailwindDoc.vue
+++ b/doc/orderlist/theming/TailwindDoc.vue
@@ -16,23 +16,6 @@ export default {
         return {
             code1: {
                 basic: `
-export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
-    overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
-    }
-};
-
 export default {
     orderlist: {
         root: 'flex',
diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/overlaypanel/theming/TailwindDoc.vue
index 9116a0901..0813cb46e 100644
--- a/doc/overlaypanel/theming/TailwindDoc.vue
+++ b/doc/overlaypanel/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/overlaypanel/theming/UnstyledDoc.vue b/doc/overlaypanel/theming/UnstyledDoc.vue
deleted file mode 100644
index a00fa480e..000000000
--- a/doc/overlaypanel/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-
-        <OverlayPanel ref="op">
-            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-        </OverlayPanel>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const op = ref();
-const toggle = (event) => {
-    op.value.toggle(event);
-}
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/overlaypanel/theming/index.vue b/doc/overlaypanel/theming/index.vue
index ab35195cc..0551efbe4 100644
--- a/doc/overlaypanel/theming/index.vue
+++ b/doc/overlaypanel/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/panel/theming/TailwindDoc.vue b/doc/panel/theming/TailwindDoc.vue
index 113c0b892..8539f6a39 100644
--- a/doc/panel/theming/TailwindDoc.vue
+++ b/doc/panel/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -24,12 +24,6 @@ export const TRANSITIONS = {
         leaveFromClass: 'max-h-40',
         leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
         leaveToClass: 'max-h-0'
-    },
-    overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
     }
 };
 
diff --git a/doc/panel/theming/UnstyledDoc.vue b/doc/panel/theming/UnstyledDoc.vue
deleted file mode 100644
index 3062d8448..000000000
--- a/doc/panel/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                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/theming/index.vue b/doc/panel/theming/index.vue
index d62a45c42..c142c1df0 100644
--- a/doc/panel/theming/index.vue
+++ b/doc/panel/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/panelmenu/theming/TailwindDoc.vue b/doc/panelmenu/theming/TailwindDoc.vue
index 8e21697a9..94e66f9db 100644
--- a/doc/panelmenu/theming/TailwindDoc.vue
+++ b/doc/panelmenu/theming/TailwindDoc.vue
@@ -24,12 +24,6 @@ export const TRANSITIONS = {
         leaveFromClass: 'max-h-40',
         leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
         leaveToClass: 'max-h-0'
-    },
-    overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
     }
 };
 
diff --git a/doc/password/theming/TailwindDoc.vue b/doc/password/theming/TailwindDoc.vue
index 41dc03670..ddd90529c 100644
--- a/doc/password/theming/TailwindDoc.vue
+++ b/doc/password/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
diff --git a/doc/progressbar/theming/TailwindDoc.vue b/doc/progressbar/theming/TailwindDoc.vue
index 6160e9d13..4801728b0 100644
--- a/doc/progressbar/theming/TailwindDoc.vue
+++ b/doc/progressbar/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -17,6 +17,32 @@ export default {
             code1: {
                 basic: `
 export default {
+    global: {
+        css: \`
+        .progressbar-value-animate::after {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        }
+        .progressbar-value-animate::before {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+        @keyframes p-progressbar-indeterminate-anim {
+            0% {
+                left: -35%;
+                right: 100%;
+            }
+            60% {
+                left: 100%;
+                right: -90%;
+            }
+            100% {
+                left: 100%;
+                right: -90%;
+            }
+        }
+    \`
+    },
     progressbar: {
         root: {
             class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
diff --git a/doc/progressbar/theming/UnstyledDoc.vue b/doc/progressbar/theming/UnstyledDoc.vue
deleted file mode 100644
index 13e33b890..000000000
--- a/doc/progressbar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <ProgressBar :value="50"></ProgressBar>
-    </div>
-    <div class="card">
-        <Toast></Toast>
-        <ProgressBar :value="value1" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { useToast } from "primevue/usetoast";
-
-onMounted(() => {
-    startProgress();
-});
-
-onBeforeUnmount(() => {
-    endProgress();
-});
-
-const toast = useToast();
-const value1 = ref(0);
-const interval = ref();
-const startProgress = () => {
-    interval.value = setInterval(() => {
-        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
-        if (newValue >= 100) {
-            newValue = 100;
-            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
-        }
-        value1.value = newValue;
-    }, 2000);
-};
-const endProgress = () => {
-    clearInterval(interval.value);
-    interval.value = null;
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressbar/theming/index.vue b/doc/progressbar/theming/index.vue
index e71e3b2f5..409291c59 100644
--- a/doc/progressbar/theming/index.vue
+++ b/doc/progressbar/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/progressspinner/theming/TailwindDoc.vue b/doc/progressspinner/theming/TailwindDoc.vue
index ec19bba0e..2206c7f4e 100644
--- a/doc/progressspinner/theming/TailwindDoc.vue
+++ b/doc/progressspinner/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -17,6 +17,46 @@ export default {
             code1: {
                 basic: `
 export default {
+    global: {
+        css: \`
+        .progress-spinner-circle {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: 0;
+            animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+            stroke-linecap: round;
+        }
+
+        @keyframes p-progress-spinner-dash{
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+            
+            50% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -35px;
+            }
+            100% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -124px;
+            }
+        }
+        @keyframes p-progress-spinner-color {
+            100%, 0% {
+                stroke: #ff5757;
+            }
+            40% {
+                stroke: #696cff;
+            }
+            66% {
+                stroke: #1ea97c;
+            }
+            80%, 90% {
+                stroke: #cc8925;
+            }
+        }
+    \`
+    },
     progressspinner: {
         root: {
             class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
diff --git a/doc/progressspinner/theming/UnstyledDoc.vue b/doc/progressspinner/theming/UnstyledDoc.vue
deleted file mode 100644
index 136bab37c..000000000
--- a/doc/progressspinner/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <ProgressSpinner />
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/progressspinner/theming/index.vue b/doc/progressspinner/theming/index.vue
index b75c87638..0b286213d 100644
--- a/doc/progressspinner/theming/index.vue
+++ b/doc/progressspinner/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/ripple/theming/TailwindDoc.vue b/doc/ripple/theming/TailwindDoc.vue
index 63ddccd30..53d135c9e 100644
--- a/doc/ripple/theming/TailwindDoc.vue
+++ b/doc/ripple/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -17,6 +17,23 @@ export default {
             code1: {
                 basic: `
 export default {
+    global: {
+        css: \`
+        *[data-pd-ripple="true"]{
+            overflow: hidden;
+            position: relative;
+        }
+        span[data-p-ink-active="true"]{
+            animation: ripple 0.4s linear;
+        }
+        @keyframes ripple {
+            100% {
+                opacity: 0;
+                transform: scale(2.5);
+            }
+        }
+    \`
+    },
     directives: {
         ripple: {
             root: {
diff --git a/doc/ripple/theming/UnstyledDoc.vue b/doc/ripple/theming/UnstyledDoc.vue
deleted file mode 100644
index cba6e4b0c..000000000
--- a/doc/ripple/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Button label="Submit" />
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/ripple/theming/index.vue b/doc/ripple/theming/index.vue
index 2e839eed7..7a192f81b 100644
--- a/doc/ripple/theming/index.vue
+++ b/doc/ripple/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/scrollpanel/theming/TailwindDoc.vue b/doc/scrollpanel/theming/TailwindDoc.vue
index ce3c8750e..165c8de88 100644
--- a/doc/scrollpanel/theming/TailwindDoc.vue
+++ b/doc/scrollpanel/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/scrollpanel/theming/UnstyledDoc.vue b/doc/scrollpanel/theming/UnstyledDoc.vue
deleted file mode 100644
index 30ea753d2..000000000
--- a/doc/scrollpanel/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel style="width: 100%; height: 200px">
-            <p class="text-gray-700 dark:text-white/80">
-                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>
-            <p class="text-gray-700 dark:text-white/80">
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-            </p>
-            <p class="text-gray-700 dark:text-white/80 m-0">
-                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-            </p>
-        </ScrollPanel>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrollpanel/theming/index.vue b/doc/scrollpanel/theming/index.vue
index db66e7034..ddbf4db0f 100644
--- a/doc/scrollpanel/theming/index.vue
+++ b/doc/scrollpanel/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/scrolltop/theming/TailwindDoc.vue b/doc/scrolltop/theming/TailwindDoc.vue
index acce0a58f..23182d7f6 100644
--- a/doc/scrolltop/theming/TailwindDoc.vue
+++ b/doc/scrolltop/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/scrolltop/theming/UnstyledDoc.vue b/doc/scrolltop/theming/UnstyledDoc.vue
deleted file mode 100644
index e621664d1..000000000
--- a/doc/scrolltop/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <ScrollPanel style="width: 250px; height: 200px">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
-                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
-                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
-                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
-                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-            </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
-        </ScrollPanel>
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/scrolltop/theming/index.vue b/doc/scrolltop/theming/index.vue
index 2e1a17ab1..9c65bcfb0 100644
--- a/doc/scrolltop/theming/index.vue
+++ b/doc/scrolltop/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/sidebar/theming/TailwindDoc.vue b/doc/sidebar/theming/TailwindDoc.vue
index f4b1714ad..faee7255e 100644
--- a/doc/sidebar/theming/TailwindDoc.vue
+++ b/doc/sidebar/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/sidebar/theming/UnstyledDoc.vue b/doc/sidebar/theming/UnstyledDoc.vue
deleted file mode 100644
index 3607cca6f..000000000
--- a/doc/sidebar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex gap-2 justify-center">
-            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
-            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
-            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
-            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
-        </div>
-
-        <Sidebar v-model:visible="visibleLeft">
-            <h2>Left Sidebar</h2>
-            <p>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.</p>
-        </Sidebar>
-
-        <Sidebar v-model:visible="visibleRight" position="right">
-            <h2>Right Sidebar</h2>
-            <p>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.</p>
-        </Sidebar>
-
-        <Sidebar v-model:visible="visibleTop" position="top">
-            <h2>Top Sidebar</h2>
-            <p>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.</p>
-        </Sidebar>
-
-        <Sidebar v-model:visible="visibleBottom" position="bottom">
-            <h2>Bottom Sidebar</h2>
-            <p>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.</p>
-        </Sidebar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const visibleLeft = ref(false);
-const visibleRight = ref(false);
-const visibleTop = ref(false);
-const visibleBottom = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/sidebar/theming/index.vue b/doc/sidebar/theming/index.vue
index 9dda4cc68..de89f9b03 100644
--- a/doc/sidebar/theming/index.vue
+++ b/doc/sidebar/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/skeleton/theming/TailwindDoc.vue b/doc/skeleton/theming/TailwindDoc.vue
index 3167d1045..28108628e 100644
--- a/doc/skeleton/theming/TailwindDoc.vue
+++ b/doc/skeleton/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/skeleton/theming/UnstyledDoc.vue b/doc/skeleton/theming/UnstyledDoc.vue
deleted file mode 100644
index bff62021a..000000000
--- a/doc/skeleton/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card text-gray-700 dark:text-white/80">
-        <div class="w-full">
-            <h5>Rectangle</h5>
-            <Skeleton class="mb-2"></Skeleton>
-            <Skeleton width="10rem" class="mb-2"></Skeleton>
-            <Skeleton width="5rem" class="mb-2"></Skeleton>
-            <Skeleton height="2rem" class="mb-2"></Skeleton>
-            <Skeleton width="10rem" height="4rem"></Skeleton>
-        </div>
-        <div class="w-full">
-            <h5>Rounded</h5>
-            <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
-            <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
-            <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
-            <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
-            <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
-        </div>
-        <div class="w-full">
-            <h5 class="mt-3">Square</h5>
-            <div class="flex items-end">
-                <Skeleton size="2rem" class="mr-2"></Skeleton>
-                <Skeleton size="3rem" class="mr-2"></Skeleton>
-                <Skeleton size="4rem" class="mr-2"></Skeleton>
-                <Skeleton size="5rem"></Skeleton>
-            </div>
-        </div>
-        <div class="w-full">
-            <h5 class="mt-3">Circle</h5>
-            <div class="flex items-end">
-                <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
-                <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
-                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-                <Skeleton shape="circle" size="5rem"></Skeleton>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/skeleton/theming/index.vue b/doc/skeleton/theming/index.vue
index 174471fad..29e097f87 100644
--- a/doc/skeleton/theming/index.vue
+++ b/doc/skeleton/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index 9d0f2db20..e6ea31839 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -59,6 +59,7 @@ export default {
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -113,6 +114,7 @@ export default {
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index c8c341179..f0270a94c 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -68,6 +68,7 @@ export default {
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
             <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
             <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -125,6 +126,7 @@ export default {
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
             <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
             <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index 3aa2e5f77..cc8a39007 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -59,6 +59,7 @@ export default {
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -113,6 +114,7 @@ data() {
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/QuarterCircleDoc.vue b/doc/speeddial/QuarterCircleDoc.vue
index de1b7418a..f749a6f91 100644
--- a/doc/speeddial/QuarterCircleDoc.vue
+++ b/doc/speeddial/QuarterCircleDoc.vue
@@ -68,6 +68,7 @@ export default {
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -125,6 +126,7 @@ data() {
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index 379fd52b2..c95e9fd47 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -68,6 +68,7 @@ export default {
             <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
             <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
             <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -124,6 +125,7 @@ export default {
         <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
         <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
         <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+        <Toast />
     </div>
 </template>
 
diff --git a/doc/speeddial/TooltipDoc.vue b/doc/speeddial/TooltipDoc.vue
index 02718e1ec..8be139680 100644
--- a/doc/speeddial/TooltipDoc.vue
+++ b/doc/speeddial/TooltipDoc.vue
@@ -62,6 +62,7 @@ export default {
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'right' }" />
             <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'left' }" />
+            <Toast />
         </div>
     </div>
 </template>
@@ -117,6 +118,7 @@ export default {
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'right' }" />
             <SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'left' }" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/theming/TailwindDoc.vue b/doc/speeddial/theming/TailwindDoc.vue
index bc11578a7..a9966797b 100644
--- a/doc/speeddial/theming/TailwindDoc.vue
+++ b/doc/speeddial/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
@@ -71,6 +71,7 @@ export default {
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
             <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
             <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+            <Toast />
         </div>
     </div>
 </template>
diff --git a/doc/speeddial/theming/UnstyledDoc.vue b/doc/speeddial/theming/UnstyledDoc.vue
deleted file mode 100644
index 39fe26adb..000000000
--- a/doc/speeddial/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <div :style="{ position: 'relative', height: '500px' }">
-            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
-            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
-            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useRouter } from 'vue-router';
-
-const toast = useToast();
-const router = useRouter();
-
-const items = ref([
-    {
-        label: 'Add',
-        icon: 'pi pi-pencil',
-        command: () => {
-            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
-        }
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash',
-        command: () => {
-            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            router.push('/fileupload');
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/'
-        }
-    }
-])
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/speeddial/theming/index.vue b/doc/speeddial/theming/index.vue
index c9eceeda3..2966e5c8b 100644
--- a/doc/speeddial/theming/index.vue
+++ b/doc/speeddial/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/splitbutton/theming/TailwindDoc.vue b/doc/splitbutton/theming/TailwindDoc.vue
index 51ddd4174..e0400d0aa 100644
--- a/doc/splitbutton/theming/TailwindDoc.vue
+++ b/doc/splitbutton/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/splitbutton/theming/UnstyledDoc.vue b/doc/splitbutton/theming/UnstyledDoc.vue
deleted file mode 100644
index 8f9479db3..000000000
--- a/doc/splitbutton/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center flex-wrap">
-        <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const items = [
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
-        }
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-        }
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
-];
-
-const save = () => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/splitbutton/theming/index.vue b/doc/splitbutton/theming/index.vue
index a4e86ff4b..38c749abc 100644
--- a/doc/splitbutton/theming/index.vue
+++ b/doc/splitbutton/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/splitter/theming/TailwindDoc.vue b/doc/splitter/theming/TailwindDoc.vue
index e51d2eaad..035ffc21a 100644
--- a/doc/splitter/theming/TailwindDoc.vue
+++ b/doc/splitter/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/splitter/theming/UnstyledDoc.vue b/doc/splitter/theming/UnstyledDoc.vue
deleted file mode 100644
index 9e465eb79..000000000
--- a/doc/splitter/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Splitter style="height: 300px" class="mb-5">
-            <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
-            <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
-        </Splitter>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/splitter/theming/index.vue b/doc/splitter/theming/index.vue
index a1a28c07c..992913a7f 100644
--- a/doc/splitter/theming/index.vue
+++ b/doc/splitter/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue
index 7c43ae803..c3a41851b 100644
--- a/doc/tabview/theming/TailwindDoc.vue
+++ b/doc/tabview/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/tabview/theming/UnstyledDoc.vue b/doc/tabview/theming/UnstyledDoc.vue
deleted file mode 100644
index 613337656..000000000
--- a/doc/tabview/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <TabView>
-            <TabPanel header="Header I">
-                <p>
-                    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>
-            </TabPanel>
-            <TabPanel header="Header II">
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </TabPanel>
-            <TabPanel header="Header III">
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
-            </TabPanel>
-            <TabPanel header="Header IV" :disabled="true"></TabPanel>
-        </TabView>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tabview/theming/index.vue b/doc/tabview/theming/index.vue
index 86c73ae6c..dfa4c2e22 100644
--- a/doc/tabview/theming/index.vue
+++ b/doc/tabview/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/tag/theming/TailwindDoc.vue b/doc/tag/theming/TailwindDoc.vue
index e941f388c..c443fde55 100644
--- a/doc/tag/theming/TailwindDoc.vue
+++ b/doc/tag/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/tag/theming/UnstyledDoc.vue b/doc/tag/theming/UnstyledDoc.vue
deleted file mode 100644
index c9951b979..000000000
--- a/doc/tag/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <Tag value="Primary"></Tag>
-        <Tag severity="success" value="Success"></Tag>
-        <Tag severity="info" value="Info"></Tag>
-        <Tag severity="warning" value="Warning"></Tag>
-        <Tag severity="danger" value="Danger"></Tag>
-    </div>
-</template>
-
-<script setup>
-
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tag/theming/index.vue b/doc/tag/theming/index.vue
index 6c4824555..578d15d37 100644
--- a/doc/tag/theming/index.vue
+++ b/doc/tag/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/terminal/theming/TailwindDoc.vue b/doc/terminal/theming/TailwindDoc.vue
index 60ad203b6..22eb42910 100644
--- a/doc/terminal/theming/TailwindDoc.vue
+++ b/doc/terminal/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/terminal/theming/UnstyledDoc.vue b/doc/terminal/theming/UnstyledDoc.vue
deleted file mode 100644
index 1883ccf58..000000000
--- a/doc/terminal/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
-    </div>
-</template>
-
-<script setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import TerminalService from "primevue/terminalservice";
-
-onMounted(() => {
-    TerminalService.on('command', commandHandler);
-})
-
-onBeforeUnmount(() => {
-    TerminalService.off('command', commandHandler);
-})
-
-const commandHandler = (text) => {
-    let response;
-    let argsIndex = text.indexOf(' ');
-    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
-    switch(command) {
-        case "date":
-            response = 'Today is ' + new Date().toDateString();
-            break;
-
-        case "greet":
-            response = 'Hola ' + text.substring(argsIndex + 1);
-            break;
-
-        case "random":
-            response = Math.floor(Math.random() * 100);
-            break;
-
-        default:
-            response = "Unknown command: " + command;
-    }
-    
-    TerminalService.emit('response', response);
-}
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/terminal/theming/index.vue b/doc/terminal/theming/index.vue
index 03d510518..7520cea8b 100644
--- a/doc/terminal/theming/index.vue
+++ b/doc/terminal/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/toast/theming/TailwindDoc.vue b/doc/toast/theming/TailwindDoc.vue
new file mode 100644
index 000000000..f5673622d
--- /dev/null
+++ b/doc/toast/theming/TailwindDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    toast: {
+        root: {
+            class: ['w-96', 'opacity-90']
+        },
+        container: ({ props }) => ({
+            class: [
+                'my-4 rounded-md w-full',
+                {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.message.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.message.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.message.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.message.severity == 'error'
+                }
+            ]
+        }),
+        content: 'flex items-center py-5 px-7',
+        icon: {
+            class: ['w-6 h-6', 'text-lg mr-2']
+        },
+        text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
+        summary: 'font-bold block',
+        detail: 'mt-1 block',
+        closebutton: {
+            class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
+        },
+        transition: {
+            enterFromClass: 'opacity-0 translate-x-0 translate-y-2/4 translate-z-0',
+            enterActiveClass: 'transition-transform transition-opacity duration-300',
+            leaveFromClass: 'max-h-40',
+            leaveActiveClass: 'transition-all duration-500 ease-in',
+            leaveToClass: 'max-h-0 opacity-0 mb-0 overflow-hidden'
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <div class="flex flex-wrap gap-2">
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warning" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const showSuccess = () => {
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
+};
+
+const showInfo = () => {
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
+};
+
+const showWarn = () => {
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
+};
+
+const showError = () => {
+    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/toast/theming/UnstyledDoc.vue b/doc/toast/theming/UnstyledDoc.vue
deleted file mode 100644
index 079e9d726..000000000
--- a/doc/toast/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Toast />
-        <div class="flex flex-wrap gap-2">
-            <Button label="Success" severity="success" @click="showSuccess" />
-            <Button label="Info" severity="info" @click="showInfo" />
-            <Button label="Warn" severity="warning" @click="showWarn" />
-            <Button label="Error" severity="danger" @click="showError" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { useToast } from "primevue/usetoast";
-const toast = useToast();
-
-const showSuccess = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
-};
-
-const showInfo = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
-};
-
-const showWarn = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
-};
-
-const showError = () => {
-    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/toast/theming/index.vue b/doc/toast/theming/index.vue
index 7e1b782ec..50573a4ad 100644
--- a/doc/toast/theming/index.vue
+++ b/doc/toast/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/toolbar/theming/TailwindDoc.vue b/doc/toolbar/theming/TailwindDoc.vue
index a2b0385b4..d341d0a79 100644
--- a/doc/toolbar/theming/TailwindDoc.vue
+++ b/doc/toolbar/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/toolbar/theming/UnstyledDoc.vue b/doc/toolbar/theming/UnstyledDoc.vue
deleted file mode 100644
index e0b9a4584..000000000
--- a/doc/toolbar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Toolbar>
-            <template #start>
-                <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
-                <i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
-            </template>
-
-            <template #end>
-                <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
-                <Button icon="pi pi-times" severity="danger" />
-            </template>
-        </Toolbar>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const items = ref([
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times'
-    },
-    {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
-        command: () => {
-            window.location.href = 'https://vuejs.org/';
-        }
-    },
-    {
-        label: 'Upload',
-        icon: 'pi pi-upload',
-        command: () => {
-            this.$router.push('fileupload');
-        }
-    }
-])
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/toolbar/theming/index.vue b/doc/toolbar/theming/index.vue
index 73ee8b9e5..528d50934 100644
--- a/doc/toolbar/theming/index.vue
+++ b/doc/toolbar/theming/index.vue
@@ -11,7 +11,6 @@
 <script>
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
 
 export default {
     data() {
@@ -25,7 +24,6 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc,
                     description: 'Theming is implemented with the pass through properties in unstyled mode.',
                     children: [
                         {
diff --git a/doc/tooltip/theming/TailwindDoc.vue b/doc/tooltip/theming/TailwindDoc.vue
index 1adafe022..a8871bd2d 100644
--- a/doc/tooltip/theming/TailwindDoc.vue
+++ b/doc/tooltip/theming/TailwindDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
-            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>A playground sample with the pre-built Tailwind theme.</p>
diff --git a/doc/tooltip/theming/UnstyledDoc.vue b/doc/tooltip/theming/UnstyledDoc.vue
deleted file mode 100644
index 5c4ee4a14..000000000
--- a/doc/tooltip/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
-        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
-        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
-    </div>
-</template>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tooltip/theming/index.vue b/doc/tooltip/theming/index.vue
index 0afc3b1ba..54fef4aa9 100644
--- a/doc/tooltip/theming/index.vue
+++ b/doc/tooltip/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/treeselect/theming/TailwindDoc.vue b/doc/treeselect/theming/TailwindDoc.vue
index 411600dc7..d1a1d8ef4 100644
--- a/doc/treeselect/theming/TailwindDoc.vue
+++ b/doc/treeselect/theming/TailwindDoc.vue
@@ -17,14 +17,6 @@ export default {
             code1: {
                 basic: `
 export const TRANSITIONS = {
-    toggleable: {
-        enterFromClass: 'max-h-0',
-        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
-        enterToClass: 'max-h-40	',
-        leaveFromClass: 'max-h-40',
-        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
-        leaveToClass: 'max-h-0'
-    },
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',