diff --git a/doc/autocomplete/StyleDoc.vue b/doc/autocomplete/theming/StyledDoc.vue
similarity index 100%
rename from doc/autocomplete/StyleDoc.vue
rename to doc/autocomplete/theming/StyledDoc.vue
diff --git a/doc/autocomplete/theming/UnstyledDoc.vue b/doc/autocomplete/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..76153e026
--- /dev/null
+++ b/doc/autocomplete/theming/UnstyledDoc.vue
@@ -0,0 +1,41 @@
+<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 {
+            value: '',
+            items: [],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/doc/autocomplete/theming/index.vue b/doc/autocomplete/theming/index.vue
new file mode 100644
index 000000000..65913fac5
--- /dev/null
+++ b/doc/autocomplete/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>AutoComplete 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/calendar/StyleDoc.vue b/doc/calendar/theming/StyledDoc.vue
similarity index 100%
rename from doc/calendar/StyleDoc.vue
rename to doc/calendar/theming/StyledDoc.vue
diff --git a/doc/calendar/theming/UnstyledDoc.vue b/doc/calendar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..268385e22
--- /dev/null
+++ b/doc/calendar/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<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 {
+            date: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Calendar v-model="date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/theming/index.vue b/doc/calendar/theming/index.vue
new file mode 100644
index 000000000..fc293b5e4
--- /dev/null
+++ b/doc/calendar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Calendar 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/cascadeselect/StyleDoc.vue b/doc/cascadeselect/theming/StyledDoc.vue
similarity index 100%
rename from doc/cascadeselect/StyleDoc.vue
rename to doc/cascadeselect/theming/StyledDoc.vue
diff --git a/doc/cascadeselect/theming/UnstyledDoc.vue b/doc/cascadeselect/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..ffef0ec89
--- /dev/null
+++ b/doc/cascadeselect/theming/UnstyledDoc.vue
@@ -0,0 +1,179 @@
+<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 {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/theming/index.vue b/doc/cascadeselect/theming/index.vue
new file mode 100644
index 000000000..bef24603b
--- /dev/null
+++ b/doc/cascadeselect/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>CascadeSelect 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/panel/StyleDoc.vue b/doc/panel/theming/StyledDoc.vue
similarity index 100%
rename from doc/panel/StyleDoc.vue
rename to doc/panel/theming/StyledDoc.vue
diff --git a/doc/panel/theming/UnstyledDoc.vue b/doc/panel/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..3062d8448
--- /dev/null
+++ b/doc/panel/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">
+        <Panel header="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panel/theming/index.vue b/doc/panel/theming/index.vue
new file mode 100644
index 000000000..939c937bc
--- /dev/null
+++ b/doc/panel/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Panel 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/autocomplete/index.vue b/pages/autocomplete/index.vue
index c15ea311c..fa0b40e58 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['AutoComplete']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -21,11 +22,11 @@ import ImportDoc from '@/doc/autocomplete/ImportDoc';
 import InvalidDoc from '@/doc/autocomplete/InvalidDoc';
 import MultipleDoc from '@/doc/autocomplete/MultipleDoc';
 import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc';
-import StyleDoc from '@/doc/autocomplete/StyleDoc';
 import TemplateDoc from '@/doc/autocomplete/TemplateDoc';
 import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc';
 import VeeValidateDoc from '@/doc/autocomplete/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/autocomplete/pt/index.vue';
+import ThemingDoc from '@/doc/autocomplete/theming/index.vue';
 
 export default {
     data() {
@@ -103,18 +104,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index f56c87dbb..653b4103d 100755
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Calendar Component" header="Calendar" description="Calendar, also known as DatePicker, is a form component to work with dates." :componentDocs="docs" :apiDocs="['Calendar']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Calendar Component"
+        header="Calendar"
+        description="Calendar, also known as DatePicker, is a form component to work with dates."
+        :componentDocs="docs"
+        :apiDocs="['Calendar']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -20,12 +28,12 @@ import MonthPickerDoc from '@/doc/calendar/MonthPickerDoc';
 import MultipleDoc from '@/doc/calendar/MultipleDoc';
 import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc';
 import RangeDoc from '@/doc/calendar/RangeDoc';
-import StyleDoc from '@/doc/calendar/StyleDoc';
 import TimeDoc from '@/doc/calendar/TimeDoc';
 import TouchUIDoc from '@/doc/calendar/TouchUIDoc';
 import YearPickerDoc from '@/doc/calendar/YearPickerDoc';
 import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/calendar/pt/index.vue';
+import ThemingDoc from '@/doc/calendar/theming/index.vue';
 
 export default {
     data() {
@@ -138,18 +146,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index 6dd6bf003..24e69fdb3 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['CascadeSelect']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -17,10 +18,10 @@ import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
-import StyleDoc from '@/doc/cascadeselect/StyleDoc';
 import TemplateDoc from '@/doc/cascadeselect/TemplateDoc';
 import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
 import PTComponent from '@/doc/cascadeselect/pt/index.vue';
+import ThemingDoc from '@/doc/cascadeselect/theming/index.vue';
 
 export default {
     data() {
@@ -73,18 +74,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index 1e1a75418..06fd549bb 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/panel/BasicDoc.vue';
 import ImportDoc from '@/doc/panel/ImportDoc.vue';
-import StyleDoc from '@/doc/panel/StyleDoc.vue';
 import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
 import PTComponent from '@/doc/panel/pt/index.vue';
+import ThemingDoc from '@/doc/panel/theming/index.vue';
 
 export default {
     data() {
@@ -34,18 +34,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
         };
     }
 };