diff --git a/doc/organizationchart/StyleDoc.vue b/doc/organizationchart/theming/StyledDoc.vue
similarity index 100%
rename from doc/organizationchart/StyleDoc.vue
rename to doc/organizationchart/theming/StyledDoc.vue
diff --git a/doc/organizationchart/theming/UnstyledDoc.vue b/doc/organizationchart/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7b9d27973
--- /dev/null
+++ b/doc/organizationchart/theming/UnstyledDoc.vue
@@ -0,0 +1,134 @@
+<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 {
+            data: {
+                key: '0',
+                type: 'country',
+                label: 'Argentina',
+                data: 'ar',
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'country',
+                        label: 'Argentina',
+                        data: 'ar',
+                        children: [
+                            {
+                                key: '0_0_0',
+                                type: 'country',
+                                label: 'Argentina',
+                                data: 'ar'
+                            },
+                            {
+                                key: '0_0_1',
+                                type: 'country',
+                                label: 'Croatia',
+                                data: 'hr'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'country',
+                        label: 'France',
+                        data: 'fr',
+                        children: [
+                            {
+                                key: '0_1_0',
+                                type: 'country',
+                                label: 'France',
+                                data: 'fr'
+                            },
+                            {
+                                key: '0_1_1',
+                                type: 'country',
+                                label: 'Morocco',
+                                data: 'ma'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
+                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{slotProps.node.data.label}}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'country',
+    label: 'Argentina',
+    data: 'ar',
+    children: [
+        {
+            key: '0_0',
+            type: 'country',
+            label: 'Argentina',
+            data: 'ar',
+            children: [
+                {
+                    key: '0_0_0',
+                    type: 'country',
+                    label: 'Argentina',
+                    data: 'ar'
+                },
+                {
+                    key: '0_0_1',
+                    type: 'country',
+                    label: 'Croatia',
+                    data: 'hr'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'country',
+            label: 'France',
+            data: 'fr',
+            children: [
+                {
+                    key: '0_1_0',
+                    type: 'country',
+                    label: 'France',
+                    data: 'fr'
+                },
+                {
+                    key: '0_1_1',
+                    type: 'country',
+                    label: 'Morocco',
+                    data: 'ma'
+                }
+            ]
+        }
+    ]
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/theming/index.vue b/doc/organizationchart/theming/index.vue
new file mode 100644
index 000000000..02fa383fc
--- /dev/null
+++ b/doc/organizationchart/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OrganizationChart Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/StyleDoc.vue b/doc/paginator/theming/StyledDoc.vue
similarity index 100%
rename from doc/paginator/StyleDoc.vue
rename to doc/paginator/theming/StyledDoc.vue
diff --git a/doc/paginator/theming/UnstyledDoc.vue b/doc/paginator/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..0902a0df4
--- /dev/null
+++ b/doc/paginator/theming/UnstyledDoc.vue
@@ -0,0 +1,26 @@
+<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">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/theming/index.vue b/doc/paginator/theming/index.vue
new file mode 100644
index 000000000..970950eca
--- /dev/null
+++ b/doc/paginator/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Paginator Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tree/StyleDoc.vue b/doc/tree/theming/StyledDoc.vue
similarity index 100%
rename from doc/tree/StyleDoc.vue
rename to doc/tree/theming/StyledDoc.vue
diff --git a/doc/tree/theming/UnstyledDoc.vue b/doc/tree/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..4aa8c20a5
--- /dev/null
+++ b/doc/tree/theming/UnstyledDoc.vue
@@ -0,0 +1,66 @@
+<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="['NodeService']" embedded />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/tree/theming/index.vue b/doc/tree/theming/index.vue
new file mode 100644
index 000000000..41d3880a4
--- /dev/null
+++ b/doc/tree/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tree Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 3cc80f223..a92d63ed1 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Organization Chart Component" header="OrganizationChart" description="OrganizationChart visualizes hierarchical organization data." :componentDocs="docs" :apiDocs="['OrganizationChart']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Organization Chart Component"
+        header="OrganizationChart"
+        description="OrganizationChart visualizes hierarchical organization data."
+        :componentDocs="docs"
+        :apiDocs="['OrganizationChart']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -8,9 +16,9 @@ import BasicDoc from '@/doc/organizationchart/BasicDoc';
 import ColoredDoc from '@/doc/organizationchart/ColoredDoc';
 import ImportDoc from '@/doc/organizationchart/ImportDoc';
 import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
-import StyleDoc from '@/doc/organizationchart/StyleDoc';
 import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
 import PTComponent from '@/doc/organizationchart/pt/index.vue';
+import ThemingDoc from '@/doc/organizationchart/theming/index.vue';
 
 export default {
     data() {
@@ -41,18 +49,14 @@ export default {
                     label: 'Colored',
                     component: ColoredDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index 823ed2b84..662092ba2 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Paginator Component" header="Paginator" description="Paginator displays data in paged format and provides navigation between pages." :componentDocs="docs" :apiDocs="['Paginator']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Paginator Component"
+        header="Paginator"
+        description="Paginator displays data in paged format and provides navigation between pages."
+        :componentDocs="docs"
+        :apiDocs="['Paginator']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -9,9 +17,9 @@ import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
 import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
 import ImportDoc from '@/doc/paginator/ImportDoc.vue';
 import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
-import StyleDoc from '@/doc/paginator/StyleDoc.vue';
 import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
 import PTComponent from '@/doc/paginator/pt/index.vue';
+import ThemingDoc from '@/doc/paginator/theming/index.vue';
 
 export default {
     data() {
@@ -47,26 +55,15 @@ export default {
                     label: 'Custom Content',
                     component: CustomContentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style scoped>
-.image-gallery {
-    text-align: center;
-    padding: 1rem;
-}
-</style>
diff --git a/pages/tree/index.vue b/pages/tree/index.vue
index f19ff8691..95d37be3d 100755
--- a/pages/tree/index.vue
+++ b/pages/tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
@@ -9,12 +9,12 @@ import EventsDoc from '@/doc/tree/EventsDoc.vue';
 import FilterDoc from '@/doc/tree/FilterDoc.vue';
 import ImportDoc from '@/doc/tree/ImportDoc.vue';
 import LazyDoc from '@/doc/tree/LazyDoc.vue';
-import StyleDoc from '@/doc/tree/StyleDoc.vue';
 import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
 import PTComponent from '@/doc/tree/pt/index.vue';
 import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
 import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
 import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
+import ThemingDoc from '@/doc/tree/theming/index.vue';
 
 export default {
     data() {
@@ -76,25 +76,15 @@ export default {
                     label: 'Filter',
                     component: FilterDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style scoped>
-button {
-    margin-right: 0.5rem;
-}
-</style>