diff --git a/doc/accordion/StyleDoc.vue b/doc/accordion/theming/StyledDoc.vue
similarity index 100%
rename from doc/accordion/StyleDoc.vue
rename to doc/accordion/theming/StyledDoc.vue
diff --git a/doc/accordion/theming/UnstyledDoc.vue b/doc/accordion/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..d2df41e77
--- /dev/null
+++ b/doc/accordion/theming/UnstyledDoc.vue
@@ -0,0 +1,45 @@
+<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
new file mode 100644
index 000000000..f17ff8833
--- /dev/null
+++ b/doc/accordion/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Accordion 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/avatar/StylingAvatarGroupDoc.vue b/doc/avatar/StylingAvatarGroupDoc.vue
deleted file mode 100644
index 9827d6e56..000000000
--- a/doc/avatar/StylingAvatarGroupDoc.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Element</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-avatar-group</td>
-                    <td>Container element.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
diff --git a/doc/avatar/StylingAvatarDoc.vue b/doc/avatar/theming/StyledDoc.vue
similarity index 73%
rename from doc/avatar/StylingAvatarDoc.vue
rename to doc/avatar/theming/StyledDoc.vue
index d8d00f60f..668784c18 100644
--- a/doc/avatar/StylingAvatarDoc.vue
+++ b/doc/avatar/theming/StyledDoc.vue
@@ -42,4 +42,21 @@
             </tbody>
         </table>
     </div>
+    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-avatar-group</td>
+                    <td>Container element.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
diff --git a/doc/avatar/theming/UnstyledDoc.vue b/doc/avatar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..c8bc39c13
--- /dev/null
+++ b/doc/avatar/theming/UnstyledDoc.vue
@@ -0,0 +1,56 @@
+<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
new file mode 100644
index 000000000..48605b3be
--- /dev/null
+++ b/doc/avatar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Avatar 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/badge/StyleDoc.vue b/doc/badge/theming/StyledDoc.vue
similarity index 100%
rename from doc/badge/StyleDoc.vue
rename to doc/badge/theming/StyledDoc.vue
diff --git a/doc/badge/theming/UnstyledDoc.vue b/doc/badge/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..11626cb71
--- /dev/null
+++ b/doc/badge/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<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-content-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>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/badge/theming/index.vue b/doc/badge/theming/index.vue
new file mode 100644
index 000000000..9d9d18a7b
--- /dev/null
+++ b/doc/badge/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Badge 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/blockui/StyleDoc.vue b/doc/blockui/theming/StyledDoc.vue
similarity index 100%
rename from doc/blockui/StyleDoc.vue
rename to doc/blockui/theming/StyledDoc.vue
diff --git a/doc/blockui/theming/UnstyledDoc.vue b/doc/blockui/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..117961fa0
--- /dev/null
+++ b/doc/blockui/theming/UnstyledDoc.vue
@@ -0,0 +1,40 @@
+<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="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
new file mode 100644
index 000000000..096831471
--- /dev/null
+++ b/doc/blockui/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>BlockUI 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/card/StyleDoc.vue b/doc/card/theming/StyledDoc.vue
similarity index 100%
rename from doc/card/StyleDoc.vue
rename to doc/card/theming/StyledDoc.vue
diff --git a/doc/card/theming/UnstyledDoc.vue b/doc/card/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..aa6fcced8
--- /dev/null
+++ b/doc/card/theming/UnstyledDoc.vue
@@ -0,0 +1,42 @@
+<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 align-items-center justify-content-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
new file mode 100644
index 000000000..90927b98f
--- /dev/null
+++ b/doc/card/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Card 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/carousel/StyleDoc.vue b/doc/carousel/theming/StyledDoc.vue
similarity index 100%
rename from doc/carousel/StyleDoc.vue
rename to doc/carousel/theming/StyledDoc.vue
diff --git a/doc/carousel/theming/UnstyledDoc.vue b/doc/carousel/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..70fb5fc31
--- /dev/null
+++ b/doc/carousel/theming/UnstyledDoc.vue
@@ -0,0 +1,85 @@
+<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">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round 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-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">\${{ 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" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </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
new file mode 100644
index 000000000..1765d2e66
--- /dev/null
+++ b/doc/carousel/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Carousel 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/chip/theming/StyledDoc.vue b/doc/chip/theming/StyledDoc.vue
new file mode 100644
index 000000000..bb20d0b9d
--- /dev/null
+++ b/doc/chip/theming/StyledDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-chip</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-image</td>
+                    <td>Container element in image mode.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-text</td>
+                    <td>Text of the chip.</td>
+                </tr>
+                <tr>
+                    <td>pi-chip-remove-icon</td>
+                    <td>Remove icon.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/chip/theming/UnstyledDoc.vue b/doc/chip/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f65d0b0a0
--- /dev/null
+++ b/doc/chip/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<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
new file mode 100644
index 000000000..b75ca6a48
--- /dev/null
+++ b/doc/chip/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chip 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/divider/StyleDoc.vue b/doc/divider/theming/StyledDoc.vue
similarity index 100%
rename from doc/divider/StyleDoc.vue
rename to doc/divider/theming/StyledDoc.vue
diff --git a/doc/divider/theming/UnstyledDoc.vue b/doc/divider/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..0cb326da0
--- /dev/null
+++ b/doc/divider/theming/UnstyledDoc.vue
@@ -0,0 +1,56 @@
+<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>
+            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
new file mode 100644
index 000000000..d48264f02
--- /dev/null
+++ b/doc/divider/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Divider 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/fieldset/StyleDoc.vue b/doc/fieldset/theming/StyledDoc.vue
similarity index 100%
rename from doc/fieldset/StyleDoc.vue
rename to doc/fieldset/theming/StyledDoc.vue
diff --git a/doc/fieldset/theming/UnstyledDoc.vue b/doc/fieldset/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..70f282a4f
--- /dev/null
+++ b/doc/fieldset/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<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
new file mode 100644
index 000000000..8ec6137a9
--- /dev/null
+++ b/doc/fieldset/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Fieldset 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/galleria/StyleDoc.vue b/doc/galleria/theming/StyledDoc.vue
similarity index 100%
rename from doc/galleria/StyleDoc.vue
rename to doc/galleria/theming/StyledDoc.vue
diff --git a/doc/galleria/theming/UnstyledDoc.vue b/doc/galleria/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a3e8019dc
--- /dev/null
+++ b/doc/galleria/theming/UnstyledDoc.vue
@@ -0,0 +1,65 @@
+<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 md:flex md:justify-content-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>`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/galleria/theming/index.vue b/doc/galleria/theming/index.vue
new file mode 100644
index 000000000..96d4147fd
--- /dev/null
+++ b/doc/galleria/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Galleria 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/image/StyleDoc.vue b/doc/image/theming/StyledDoc.vue
similarity index 100%
rename from doc/image/StyleDoc.vue
rename to doc/image/theming/StyledDoc.vue
diff --git a/doc/image/theming/UnstyledDoc.vue b/doc/image/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..013121aa8
--- /dev/null
+++ b/doc/image/theming/UnstyledDoc.vue
@@ -0,0 +1,23 @@
+<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">
+        <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
new file mode 100644
index 000000000..a97e8d97a
--- /dev/null
+++ b/doc/image/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Image 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/inplace/StyleDoc.vue b/doc/inplace/theming/StyledDoc.vue
similarity index 100%
rename from doc/inplace/StyleDoc.vue
rename to doc/inplace/theming/StyledDoc.vue
diff --git a/doc/inplace/theming/UnstyledDoc.vue b/doc/inplace/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..26dd6f833
--- /dev/null
+++ b/doc/inplace/theming/UnstyledDoc.vue
@@ -0,0 +1,35 @@
+<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> View Content </template>
+            <template #content>
+                <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>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inplace/theming/index.vue b/doc/inplace/theming/index.vue
new file mode 100644
index 000000000..ad5db59e5
--- /dev/null
+++ b/doc/inplace/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Inplace 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/progressbar/StyleDoc.vue b/doc/progressbar/theming/StyledDoc.vue
similarity index 100%
rename from doc/progressbar/StyleDoc.vue
rename to doc/progressbar/theming/StyledDoc.vue
diff --git a/doc/progressbar/theming/UnstyledDoc.vue b/doc/progressbar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..13e33b890
--- /dev/null
+++ b/doc/progressbar/theming/UnstyledDoc.vue
@@ -0,0 +1,58 @@
+<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
new file mode 100644
index 000000000..2c90a4a9a
--- /dev/null
+++ b/doc/progressbar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Progressbar 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/skeleton/StyleDoc.vue b/doc/skeleton/theming/StyledDoc.vue
similarity index 100%
rename from doc/skeleton/StyleDoc.vue
rename to doc/skeleton/theming/StyledDoc.vue
diff --git a/doc/skeleton/theming/UnstyledDoc.vue b/doc/skeleton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..52fb81e61
--- /dev/null
+++ b/doc/skeleton/theming/UnstyledDoc.vue
@@ -0,0 +1,61 @@
+<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="">
+            <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>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/skeleton/theming/index.vue b/doc/skeleton/theming/index.vue
new file mode 100644
index 000000000..58029b5e7
--- /dev/null
+++ b/doc/skeleton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Skeleton 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/splitter/StyleDoc.vue b/doc/splitter/theming/StyledDoc.vue
similarity index 100%
rename from doc/splitter/StyleDoc.vue
rename to doc/splitter/theming/StyledDoc.vue
diff --git a/doc/splitter/theming/UnstyledDoc.vue b/doc/splitter/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..71e73ac75
--- /dev/null
+++ b/doc/splitter/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<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 align-items-center justify-content-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex align-items-center justify-content-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
new file mode 100644
index 000000000..58533266e
--- /dev/null
+++ b/doc/splitter/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Splitter 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/tabview/StyleDoc.vue b/doc/tabview/theming/StyledDoc.vue
similarity index 100%
rename from doc/tabview/StyleDoc.vue
rename to doc/tabview/theming/StyledDoc.vue
diff --git a/doc/tabview/theming/UnstyledDoc.vue b/doc/tabview/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..613337656
--- /dev/null
+++ b/doc/tabview/theming/UnstyledDoc.vue
@@ -0,0 +1,46 @@
+<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
new file mode 100644
index 000000000..1bc51c636
--- /dev/null
+++ b/doc/tabview/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tabview 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/tag/StyleDoc.vue b/doc/tag/theming/StyledDoc.vue
similarity index 100%
rename from doc/tag/StyleDoc.vue
rename to doc/tag/theming/StyledDoc.vue
diff --git a/doc/tag/theming/UnstyledDoc.vue b/doc/tag/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7fd0c5762
--- /dev/null
+++ b/doc/tag/theming/UnstyledDoc.vue
@@ -0,0 +1,32 @@
+<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="flex flex-wrap justify-content-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
new file mode 100644
index 000000000..5498d1dc9
--- /dev/null
+++ b/doc/tag/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tag 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/terminal/StyleDoc.vue b/doc/terminal/theming/StyledDoc.vue
similarity index 100%
rename from doc/terminal/StyleDoc.vue
rename to doc/terminal/theming/StyledDoc.vue
diff --git a/doc/terminal/theming/UnstyledDoc.vue b/doc/terminal/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..83035c5fb
--- /dev/null
+++ b/doc/terminal/theming/UnstyledDoc.vue
@@ -0,0 +1,84 @@
+<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>
+        <p>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>
+
+<style scoped>
+p {
+    margin-top: 0;
+}
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-command) {
+    color: #80cbc4;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-prompt) {
+    color: #ffd54f;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-response) {
+    color: #9fa8da;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/terminal/theming/index.vue b/doc/terminal/theming/index.vue
new file mode 100644
index 000000000..0cbc0eeb5
--- /dev/null
+++ b/doc/terminal/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Terminal 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/toolbar/StyleDoc.vue b/doc/toolbar/theming/StyledDoc.vue
similarity index 100%
rename from doc/toolbar/StyleDoc.vue
rename to doc/toolbar/theming/StyledDoc.vue
diff --git a/doc/toolbar/theming/UnstyledDoc.vue b/doc/toolbar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a83f34469
--- /dev/null
+++ b/doc/toolbar/theming/UnstyledDoc.vue
@@ -0,0 +1,65 @@
+<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 p-toolbar-separator 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
new file mode 100644
index 000000000..524b50f26
--- /dev/null
+++ b/doc/toolbar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Toolbar 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/accordion/index.vue b/pages/accordion/index.vue
index cdf8917a0..d5fc89ab4 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -1,8 +1,17 @@
 <template>
-    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Accordion Component"
+        header="Accordion"
+        description="Accordion groups a collection of contents in tabs."
+        :componentDocs="docs"
+        :apiDocs="['Accordion', 'AccordionTab']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Accordion/theming/index.vue';
 import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc';
 import BasicDoc from '@/doc/accordion/BasicDoc';
 import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
@@ -10,7 +19,6 @@ import Disabled from '@/doc/accordion/DisabledDoc.vue';
 import DynamicDoc from '@/doc/accordion/DynamicDoc';
 import ImportDoc from '@/doc/accordion/ImportDoc';
 import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
-import StyleDoc from '@/doc/accordion/StyleDoc';
 import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
 import PTComponent from '@/doc/accordion/pt/index.vue';
 
@@ -53,18 +61,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index f65712300..3fca7b992 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,16 +1,23 @@
 <template>
-    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :apiDocs="['Avatar', 'AvatarGroup']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Avatar Component"
+        header="Avatar"
+        description="Avatar represents people using icons, labels and images."
+        :componentDocs="docs"
+        :apiDocs="['Avatar', 'AvatarGroup']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Avatar/theming/index.vue';
 import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
 import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc';
 import IconDoc from '@/doc/avatar/IconDoc';
 import ImageDoc from '@/doc/avatar/ImageDoc';
 import ImportDoc from '@/doc/avatar/ImportDoc';
 import LabelDoc from '@/doc/avatar/LabelDoc';
-import StylingAvatarDoc from '@/doc/avatar/StylingAvatarDoc';
-import StylingAvatarGroupDoc from '@/doc/avatar/StylingAvatarGroupDoc';
 import PTComponent from '@/doc/avatar/pt/index.vue';
 
 export default {
@@ -42,23 +49,14 @@ export default {
                     label: 'AvatarGroup',
                     component: AvatarGroupDoc
                 },
-                {
-                    id: 'stylingofavatar',
-                    label: 'Styling of Avatar',
-                    component: StylingAvatarDoc
-                },
-                {
-                    id: 'stylingofavatargroup',
-                    label: 'Styling of Avatar Group',
-                    component: StylingAvatarGroupDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index f9065b43c..3681c84dc 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Badge/theming/index.vue';
 import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/badge/BasicDoc.vue';
 import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
@@ -10,7 +11,6 @@ import ImportDoc from '@/doc/badge/ImportDoc.vue';
 import PositionDoc from '@/doc/badge/PositionDoc.vue';
 import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
 import SizeDoc from '@/doc/badge/SizeDoc.vue';
-import StyleDoc from '@/doc/badge/StyleDoc.vue';
 import PTComponent from '@/doc/badge/pt/index.vue';
 
 export default {
@@ -47,18 +47,14 @@ export default {
                     label: 'Button',
                     component: ButtonDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/blockui/index.vue b/pages/blockui/index.vue
index 5306c1b2e..60ab52447 100755
--- a/pages/blockui/index.vue
+++ b/pages/blockui/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Blockui/theming/index.vue';
 import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/blockui/BasicDoc.vue';
 import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
 import ImportDoc from '@/doc/blockui/ImportDoc.vue';
-import StyleDoc from '@/doc/blockui/StyleDoc.vue';
 import PTComponent from '@/doc/blockui/pt/index.vue';
 
 export default {
@@ -29,18 +29,14 @@ export default {
                     label: 'Document',
                     component: DocumentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/card/index.vue b/pages/card/index.vue
index b65bf0fff..e7ad8b4de 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -7,9 +7,8 @@ import AccessibilityDoc from '@/doc/card/AccessibilityDoc';
 import AdvancedDoc from '@/doc/card/AdvancedDoc';
 import BasicDoc from '@/doc/card/BasicDoc';
 import ImportDoc from '@/doc/card/ImportDoc';
-import StyleDoc from '@/doc/card/StyleDoc';
 import PTComponent from '@/doc/card/pt/index.vue';
-
+import ThemingDoc from '@/doc/Card/theming/index.vue';
 export default {
     data() {
         return {
@@ -29,18 +28,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index 3ba5fd421..a7fa6b8b7 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -1,15 +1,23 @@
 <template>
-    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :apiDocs="['Carousel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Carousel Component"
+        header="Carousel"
+        description="Carousel is a content slider featuring various customization options."
+        :componentDocs="docs"
+        :apiDocs="['Carousel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Carousel/theming/index.vue';
 import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc';
 import BasicDoc from '@/doc/carousel/BasicDoc';
 import CircularDoc from '@/doc/carousel/CircularDoc';
 import ImportDoc from '@/doc/carousel/ImportDoc';
 import NumScrollDoc from '@/doc/carousel/NumScrollDoc';
 import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc';
-import StyleDoc from '@/doc/carousel/StyleDoc';
 import VerticalDoc from '@/doc/carousel/VerticalDoc';
 import PTComponent from '@/doc/carousel/pt/index.vue';
 
@@ -47,18 +55,14 @@ export default {
                     label: 'Vertical',
                     component: VerticalDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index c9dd9b2ad..f91edbbdd 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Chip/theming/index.vue';
 import AccessibilityDoc from '@/doc/chip/AccessibilityDoc';
 import BasicDoc from '@/doc/chip/BasicDoc';
 import IconDoc from '@/doc/chip/IconDoc';
 import ImageDoc from '@/doc/chip/ImageDoc';
 import ImportDoc from '@/doc/chip/ImportDoc';
-import StyleDoc from '@/doc/chip/StyleDoc';
 import TemplateDoc from '@/doc/chip/TemplateDoc';
 import PTComponent from '@/doc/chip/pt/index.vue';
 
@@ -41,18 +41,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/divider/index.vue b/pages/divider/index.vue
index 4633cd71f..b5ec60caa 100644
--- a/pages/divider/index.vue
+++ b/pages/divider/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Divider/theming/index.vue';
 import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/divider/BasicDoc.vue';
 import ContentDoc from '@/doc/divider/ContentDoc.vue';
 import ImportDoc from '@/doc/divider/ImportDoc.vue';
 import LoginDoc from '@/doc/divider/LoginDoc.vue';
-import StyleDoc from '@/doc/divider/StyleDoc.vue';
 import TypeDoc from '@/doc/divider/TypeDoc.vue';
 import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
 import PTComponent from '@/doc/divider/pt/index.vue';
@@ -47,18 +47,14 @@ export default {
                     label: 'Login',
                     component: LoginDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/fieldset/index.vue b/pages/fieldset/index.vue
index 2b8cea9ea..eeeff22c7 100755
--- a/pages/fieldset/index.vue
+++ b/pages/fieldset/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Fieldset/theming/index.vue';
 import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
 import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
-import StyleDoc from '@/doc/fieldset/StyleDoc.vue';
 import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
 import PTComponent from '@/doc/fieldset/pt/index.vue';
@@ -35,18 +35,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 13d888279..ec6026710 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Galleria/theming/index.vue';
 import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc';
 import AdvancedDoc from '@/doc/galleria/AdvancedDoc';
 import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc';
@@ -11,7 +12,6 @@ import CaptionDoc from '@/doc/galleria/CaptionDoc';
 import ControlledDoc from '@/doc/galleria/ControlledDoc';
 import ImportDoc from '@/doc/galleria/ImportDoc';
 import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc';
-import StyleDoc from '@/doc/galleria/StyleDoc';
 import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc';
 import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc';
 import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc';
@@ -146,18 +146,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 0d1741e8a..620c2ba16 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Image/theming/index.vue';
 import AccessibilityDoc from '@/doc/image/AccessibilityDoc';
 import BasicDoc from '@/doc/image/BasicDoc';
 import ImportDoc from '@/doc/image/ImportDoc';
 import PreviewDoc from '@/doc/image/PreviewDoc';
-import StyleDoc from '@/doc/image/StyleDoc';
 import TemplateDoc from '@/doc/image/TemplateDoc';
 import PTComponent from '@/doc/image/pt/index.vue';
 
@@ -35,18 +35,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index 5ada49fdd..f733c9e9d 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -6,17 +6,18 @@
         :componentDocs="docs"
         :apiDocs="['Inplace']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Inplace/theming/index.vue';
 import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc';
 import BasicDoc from '@/doc/inplace/BasicDoc';
 import ImageDoc from '@/doc/inplace/ImageDoc';
 import ImportDoc from '@/doc/inplace/ImportDoc';
 import InputDoc from '@/doc/inplace/InputDoc';
 import LazyDoc from '@/doc/inplace/LazyDoc';
-import StyleDoc from '@/doc/inplace/StyleDoc';
 import PTComponent from '@/doc/inplace/pt/index.vue';
 
 export default {
@@ -48,18 +49,14 @@ export default {
                     label: 'Lazy',
                     component: LazyDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index 852098f81..2ab2486cf 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Progressbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc';
 import BasicDoc from '@/doc/progressbar/BasicDoc';
 import DynamicDoc from '@/doc/progressbar/DynamicDoc';
 import ImportDoc from '@/doc/progressbar/ImportDoc';
 import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
-import StyleDoc from '@/doc/progressbar/StyleDoc';
 import TemplateDoc from '@/doc/progressbar/TemplateDoc';
 import PTComponent from '@/doc/progressbar/pt/index.vue';
 
@@ -41,18 +41,14 @@ export default {
                     label: 'Indeterminate',
                     component: IndeterminateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index 5ec3351b7..302b86005 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -1,15 +1,23 @@
 <template>
-    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Skeleton Component"
+        header="Skeleton"
+        description="Skeleton is a placeholder to display instead of the actual content."
+        :componentDocs="docs"
+        :apiDocs="['Skeleton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Skeleton/theming/index.vue';
 import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
 import CardDoc from '@/doc/skeleton/CardDoc.vue';
 import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
 import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
 import ListDoc from '@/doc/skeleton/ListDoc.vue';
 import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
-import StyleDoc from '@/doc/skeleton/StyleDoc.vue';
 import PTComponent from '@/doc/skeleton/pt/index.vue';
 
 export default {
@@ -41,18 +49,14 @@ export default {
                     label: 'Datatable',
                     component: DataTableDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: Accessibility
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/splitter/index.vue b/pages/splitter/index.vue
index 1f85d5501..930e01862 100644
--- a/pages/splitter/index.vue
+++ b/pages/splitter/index.vue
@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :apiDocs="['Splitter', 'SplitterPanel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Splitter Component"
+        header="Splitter"
+        description="Splitter is utilized to separate and resize panels."
+        :componentDocs="docs"
+        :apiDocs="['Splitter', 'SplitterPanel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Splitter/theming/index.vue';
 import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc';
 import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
 import ImportDoc from '@/doc/splitter/ImportDoc';
 import NestedDoc from '@/doc/splitter/NestedDoc.vue';
 import SizeDoc from '@/doc/splitter/SizeDoc.vue';
-import StyleDoc from '@/doc/splitter/StyleDoc';
 import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
 import PTComponent from '@/doc/splitter/pt/index.vue';
 
@@ -41,18 +49,14 @@ export default {
                     label: 'Nested',
                     component: NestedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index eed864574..b626c7d56 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -1,8 +1,17 @@
 <template>
-    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Tabs Component"
+        header="TabView"
+        description="TabView is a container component to group content with tabs."
+        :componentDocs="docs"
+        :apiDocs="['TabView', 'TabPanel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Tabview/theming/index.vue';
 import AccessibilityDoc from '@/doc/tabview/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/tabview/BasicDoc.vue';
 import ControlledDoc from '@/doc/tabview/ControlledDoc.vue';
@@ -10,7 +19,6 @@ import DisabledDoc from '@/doc/tabview/DisabledDoc.vue';
 import DynamicDoc from '@/doc/tabview/DynamicDoc.vue';
 import ImportDoc from '@/doc/tabview/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
-import StyleDoc from '@/doc/tabview/StyleDoc.vue';
 import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
 import PTComponent from '@/doc/tabview/pt/index.vue';
 
@@ -53,18 +61,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index a28f923c6..519c4246d 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -1,15 +1,15 @@
 <template>
-    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Tag/theming/index.vue';
 import AccessibilityDoc from '@/doc/tag/AccessibilityDoc';
 import BasicDoc from '@/doc/tag/BasicDoc';
 import IconDoc from '@/doc/tag/IconDoc';
 import ImportDoc from '@/doc/tag/ImportDoc';
 import PillDoc from '@/doc/tag/PillDoc';
 import SeverityDoc from '@/doc/tag/SeverityDoc';
-import StyleDoc from '@/doc/tag/StyleDoc';
 import TemplateDoc from '@/doc/tag/TemplateDoc';
 import PTComponent from '@/doc/tag/pt/index.vue';
 
@@ -47,18 +47,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index cc006c454..32989afbc 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Terminal/theming/index.vue';
 import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
 import BasicDoc from '@/doc/terminal/BasicDoc';
 import ImportDoc from '@/doc/terminal/ImportDoc';
-import StyleDoc from '@/doc/terminal/StyleDoc';
 import PTComponent from '@/doc/terminal/pt/index.vue';
 
 export default {
@@ -23,18 +23,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/toolbar/index.vue b/pages/toolbar/index.vue
index 627fcc0c1..895060e07 100755
--- a/pages/toolbar/index.vue
+++ b/pages/toolbar/index.vue
@@ -1,11 +1,11 @@
 <template>
-    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
+import ThemingDoc from '@/doc/Toolbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
 import BasicDoc from '@/doc/toolbar/BasicDoc';
 import ImportDoc from '@/doc/toolbar/ImportDoc';
-import StyleDoc from '@/doc/toolbar/StyleDoc';
 import PTComponent from '@/doc/toolbar/pt/index.vue';
 
 export default {
@@ -22,18 +22,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };